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;
  }

}