То, что вы пытаетесь сделать, это создавать компоненты программно, а затем обращаться к их методам и свойствам.
Способ, которым 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]
})
Я сделал демоверсию , так что более понятно, вы можете прочитать больше о динамическом создании компонентов в этой статье Луки Оникадзе .