动态地将一个组件附加到另一个组件中

Question

这是我的 stackblitz 链接：DEMO

当可视化类型为“表”时，我正在尝试将“表”组件附加到应用程序组件的#test 中。为此，我调用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 动态添加组件。这在Angular Docs 中有进一步的解释。在 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 { }