Динамически добавлять один компонент в другой компонент

Question

Вот моя ссылка на стек: DEMO

Я пытаюсь добавить компонент 'table' в компонент #test приложения, когда тип визуализации - 'table'.Для этого я вызываю createTable(), который создает и добавляет теги <app-table> в #test div.Тег

<app-table> присутствует в DOM, но не в содержимом table.component.html (т. Е. Таблица работает!). Это может быть потому, что это простой тег, а не скомпилированный компонент.

Как получить содержимое компонента таблицы, отображаемого внутри компонента приложения?

Answer 1

Попробуйте это

 createTable() {
    this.container.clear(); 
    const factory = this.resolver.resolveComponentFactory(TableComponent);
    this.componentRef = this.container.createComponent(factory);  

  }

Пример: https://stackblitz.com/edit/dashboard-inchara-3xrjkj

Answer 2

Используйте ComponentFactoryResolver для динамического добавления компонентов. Это дополнительно объясняется в угловых документах . Добавлено полное решение в stackblitz: ComponentFactoryResolver . Итак, вот что я сделал:

создание таблицы в app.component.ts:

createTable(container) {
  let componentFactory = this.componentFactoryResolver.resolveComponentFactory(TableComponent);
  let viewContainerRef = this.insTable.viewContainerRef;
  viewContainerRef.clear();
  let componentRef = viewContainerRef.createComponent(componentFactory);
  // let e = document.createElement("app-table");
  // container.appendChild(e);
}

Директива, используемая как и точка привязки table.directive.ts:

import { Directive, ViewContainerRef } from '@angular/core';

@Directive({
  selector: '[ins-table]',
})
export class TableDirective {
  constructor(public viewContainerRef: ViewContainerRef) { }
}

И app.component.html:

<div #charts id="test">
  <ng-template ins-table></ng-template>
</div>

И app.module.ts с правильными декларациями, чтобы все это работало:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ChartModule } from 'angular-highcharts';

import { AppComponent } from './app.component';

import { HttpClientModule } from '@angular/common/http';
import { TableComponent } from './table/table.component';
import { TableDirective } from './table/table.directive';

@NgModule({
  imports: [BrowserModule, ChartModule, HttpClientModule],
  declarations: [AppComponent, TableComponent, TableDirective],
  bootstrap: [AppComponent],
  providers: [HttpClientModule],
  entryComponents: [
    TableComponent
  ]
})
export class AppModule { }