Программно визуализация/уничтожение компонентов из компонента без хост (угловой) ⇐ Javascript

[Anonymous]

Задача состоит в том, чтобы создать полностью динамический и независимый компонент (подсказка инструментов), который может быть программно отображаться/уничтожить в определенном месте в DOM (панель панели) компонентом, не являющимся хост (календарь). Это подъема инструментов, показанная на пахни внутри календаря (или через календарь, если быть точным). Его нельзя добавить в DOM как ребенок календаря , хотя из -за определенных ограничений CSS с положением: фиксированный + overflow: auto .
Вот основная структура, которую я хочу:

Код: Выделить всё

I programmatically add a tooltip to my distant ancestor on hover



I am programmatically rendered and destroyed

После поиска в Интернете и документах я теперь думаю, что я должен использовать createcomponent () внутри компонента календаря. Последнее не позволяет устанавливать хост -элемент.
Первое допускает это, но у него есть другая проблема: когда я уничтожаю подсказку, используя это.tooltipinstance.destroy () , он также удаляет элемент хоста.

Код: Выделить всё

I programmatically add a tooltip to my distant ancestor on hover





I am programmatically rendered and destroyed


< /code>
eventMouseEnter({ event, el }) {
this.tooltipInstance = createComponent(TooltipComponent, {
environmentInjector: this.injector,
hostElement: document.querySelector('.event-tooltip-host')!,
bindings: [inputBinding('event', () => event), inputBinding('element', () => el)]
})

this.appRef.attachView(this.tooltipInstance.hostView)
this.tooltipInstance.changeDetectorRef.detectChanges()
}

eventMouseLeave() {
this.appRef.detachView(this.tooltipInstance.hostView)
this.tooltipInstance.destroy()
}
< /code>
It appears impossible to fully control dynamic rendering of a component back and forth from within a totally random component.
My backup plan is to do it from Dashboard component via some app-level actions which I can listen to in any component, but I would really expect Angular to have a better way to do it.
So, the question is [b]how do I avoid destroying the wrapper,[/b] 

, и только уничтожить
?


Подробнее здесь: https://stackoverflow.com/questions/796 ... nt-angular