您正在尝试以编程方式创建组件，然后访问它们的方法和属性。
Angular 创建组件实例的方式是使用Factory resolver 来创建新组件，并使用ViewContainerRef 来附加和渲染组件。
首先创建一个指令，用作您的一个表的 ViewContainerRef，它将呈现组件（我相信您现在缺少的）并允许您访问它的方法和属性。
import { Directive, ViewContainerRef } from '@angular/core';
@Directive({
selector: '[appTable]'
})
export class TableDirective {
constructor(public viewContainerRef: ViewContainerRef) { }
}
现在您可以将其添加到 ng-template 标签并使用 FactoryResolver 在其中渲染组件：
import { Component, ComponentFactoryResolver, ViewChild, OnInit, ComponentRef } from '@angular/core';
import { TableComponent } from './table/table.component';
import { TableDirective } from './table.directive';
@Component({
selector: 'app-root',
template: `
<ng-template appTable></ng-template>
`,
})
export class AppComponent implements OnInit {
@ViewChild(TableDirective) tableHost: TableDirective;
tableComponent: ComponentRef<TableComponent>;
constructor(private componentFactoryResolver: ComponentFactoryResolver) {
}
ngOnInit() {
// TableComponents = new TableComponents(); wrong way!
/**
* creating the component factory resolver
*/
const tableFactory = this.componentFactoryResolver.resolveComponentFactory(TableComponent);
const viewContainerRef = this.tableHost.viewContainerRef;
/**
* clearing just in case something else was rendered before
*/
viewContainerRef.clear();
/**
* now you will be able to access the methods and properties of your component after this
*/
this.tableComponent = viewContainerRef.createComponent(tableFactory);
}
}
最后，当组件以编程方式呈现时，您需要将其添加到模块的 entryComponents 数组中：
@NgModule({
declarations: [
AppComponent,
TableComponent,
TableDirective
],
imports: [
BrowserModule
],
entryComponents: [TableComponent],
providers: [],
bootstrap: [AppComponent]
})
我创建了一个demo，所以它更清楚，您可以在 Luka Onikadze 的article 中阅读有关动态创建组件的更多信息。