Как динамически добавлять угловые компоненты в DOM без предопределенного ViewContainerRef?

Question

• Это решение, которое я нашел, я думаю, будет полезно для других.

• Это может быть применено клюбой собственный элемент, для которого не установлен ViewContainerRef.

Я пытаюсь имплантировать угловой компонент в таблицу (Tabulator v4.2) при событии щелчка.Таблица создается динамически с помощью плагина, поэтому у меня нет доступа к элементам DOM, для которых мне нужно установить угловой ViewContainerRef.В обратном вызове события click у меня есть доступ к элементу, к которому я хочу добавить угловой компонент.

Как добавить угловой компонент к этому элементу без установленного углового ViewContainerRef?

Каждый щелчок должен создавать новый компонент и устанавливать его внутри данного элемента DOM.

Answer 1

Я решил это с помощью углового рендера и угловых динамических компонентов. Угловой динамический загрузчик компонентов

Родительский компонент HTML

<ng-template #willContainTheChildComponent></ng-template>

Класс родительского компонента

@ViewChild('willContainTheChildComponent', {read: ViewContainerRef}) willContainTheChildComponent: ViewContainerRef;

constructor(private componentFactoryResolver: ComponentFactoryResolver,
    private renderer: Renderer2) {
}



//The click handler
            onClick: (e, row) => {
                const componentFactory = this.componentFactoryResolver.resolveComponentFactory(TheComponentClass);
                const component = this.willContainTheChildComponent.createComponent(componentFactory);
                //Here I have access to component.instance to manipulate the class' contents
                this.renderer.appendChild(row.getElement(), component.location.nativeElement);
            }