Angular - 如何为mat-tab中的不同选项卡创建单独的“ViewContainerRef”容器

Question

我正在通过将html数据和函数绑定到它来创建带有动态组件的运行时组件模块，我从api调用中获取它作为字符串数据。然后将新生成的组件加载到我的容器中，放置在选项卡中，因为我根据数据动态创建选项卡。该过程适用于第一个选项卡，但不适用于其他选项卡。

这可能意味着，我推送我的运行时组件的容器生成一次，因此不反映其他选项卡。

HTML：

<mat-tab-group [selectedIndex]="tabIndex" (selectedTabChange)="getNewTabFields($event)">
      <mat-tab *ngFor="let tab of tabs" [label]="tab.displayName">
        <div *ngIf="errorOccured" class="text-align-center"> No Data Found! </div>
        <ng-container #container></ng-container>
      </mat-tab>
    </mat-tab-group>

零件：

@ViewChild('container', { read: ViewContainerRef }) container: ViewContainerRef;
ngOnInit() {
this.templateInitial = 
this.searchConfig.configurations[0].value.resultView;
this.query = this.searchConfig.configurations[6].value.queryParams;          
this.collectionName = 
this.searchConfig.configurations[6].value.collectionName;
this.loadSearchData();
}
compileTemplate() {
const metadata = {
  selector: `runtime-component`,
  template: this.templateInitial
};
const _mydata = this.solrResponse.response.docs;
const code: string =  this.searchConfig.configurations[1].value['logic'];
const result: string = ts.transpile(code);
const runnalbe: any = eval(result);
const compileClass = class RuntimeComponent {
  solrResponses = _mydata;
  presentLogic = runnalbe;
};

const factory = this.createComponentFactorySync(this.compiler, metadata, compileClass );
if (this.componentRef) {
  this.container.remove(this.container.indexOf(this.componentRef));
  this.componentRef = undefined;
}
this.componentRef = this.container.createComponent(factory);
}

private createComponentFactorySync(compiler: Compiler, metadata: Component, componentClass: any): ComponentFactory<any> {
const decoratedCmp = Component(metadata)(componentClass);

@NgModule({ imports: [CommonModule, SharedModule], declarations: [decoratedCmp] })
class RuntimeComponentModule { }

const module: ModuleWithComponentFactories<any> = compiler.compileModuleAndAllComponentsSync(RuntimeComponentModule);
this.componentInstance = module.componentFactories.find((f) => f.componentType === decoratedCmp);
return module.componentFactories.find((f) => f.componentType === decoratedCmp);
}
 getNewTabFields(event) {
this.tabIndex = event.index;
this.constructTabData(this.tabIndex);
}
constructTabData(i) {
this.templateInitial = this.tabs[i].configurations.resultView;
this.query = this.tabs[i].configurations.query[0].queryParams;
this.collectionName = this.tabs[i].configurations.query[0].queryParams['collection'].split(' ')[0];
this.loadSearchData();
}
loadSearchData(_row = 10, _start = 0) {

this.solrSearchService.getSolrData(this.query, this.collectionName).subscribe((data: any) => {
    this.solrResponse = [];
    this.solrResponse = JSON.parse(data);
    this.compileTemplate();
});
}

Answer 1

我宁愿用于创建这些容器的指令。

HTML：

<mat-tab-group [selectedIndex]="tabIndex" (selectedTabChange)="getNewTabFields($event)">
    <div *ngIf="errorOccured" class="text-align-center"> No Data Found! </div>
    <ng-container myDirective *ngFor="let tab of tabs" [tab]="tab"></ng-container>
</mat-tab-group>

我的指示：

@Directive({
  selector: '[myDirective]'
})
export class MyDirective implements OnInit {

  @Input()
  tab: MyTamComponent;


  constructor(private resolver: ComponentFactoryResolver, private container: ViewContainerRef) {}

  ngOnInit(): void {
    const factory = this.resolver.resolveComponentFactory<MyTamComponent>(MyTamComponent);
    const component = this.container.createComponent(factory);

    // other stuff
    component.instance.label = tab.displayName;
    component.instance.ref = component;
  }

}