Angular - mat-tab 中的动态组件

Posted 2023-03-13

【中文标题】Angular - mat-tab 中的动态组件

【英文标题】：Angular - Dynamic component in mat-tab

【发布时间】：2019-03-01 02:50:40

【问题描述】：

我有一个 mat-tab-group（角度材料），我希望能够从 mat-tabs 后面的代码中添加，包括其他组件。我正在使用 ComponentFactoryResolver 创建组件，但我无法通过 ViewContainerRef 将新组件添加到新的 mat-tab

html

<mat-tab-group>
 <mat-tab *ngFor="let tab of tabs"  [label]="tab.title">
  <div #test></div>
 </mat-tab>
</mat-tab-group>

后面的代码

private open(type:string):void
 var tab = title:'test';
 this.tabs.push(tab);

 const factory = this.componentFactoryResolver.resolveComponentFactory(DiscountGridComponent );
 //this will add it in the end of the view
 const newComponentRef = this.viewContainerRef.createComponent(factory);

【问题讨论】：

我不确定我是否理解您的问题。为什么不直接在他们的指令中添加你需要的组件呢？即

我将有一个菜单，我将根据从菜单中选择的内容打开具有不同组件的新选项卡。

【参考方案1】：

想分享我的想法，以防对其他人有所帮助：

export class DynamicTabComponent implements AfterViewInit 
    public tabs = [ComponentOne, ComponentTwo];

    @ViewChild('container', read: ViewContainerRef, static: false) public viewContainer: ViewContainerRef;

    constructor(private componentFactoryResolver: ComponentFactoryResolver) 
    

    public ngAfterViewInit(): void 
        this.renderComponent(0);
    

    public tabChange(index: number) 
        setTimeout(() => 
            this.renderComponent(index);
        );
    

    private renderComponent(index: number) 
        const factory = this.componentFactoryResolver.resolveComponentFactory(this.components[index]);
        this.viewContainer.createComponent(factory);
    

模板：

<mat-tab-group (selectedIndexChange)="tabChange($event)">
    <mat-tab label="Tab" *ngFor="let component of components">
        <ng-template matTabContent>
            <div #container></div>
        </ng-template>
    </mat-tab>
</mat-tab-group>

【参考方案2】：

我也替换了 BrowserAnimationsModule 并使用了 NoopAnimationsModule。

    export class DynamicTabComponent implements AfterViewInit 
    public tabs = [ComponentOne, ComponentTwo];

    @ViewChild('container', read: ViewContainerRef, static: false) public 
    viewContainer: ViewContainerRef;

    constructor(private componentFactoryResolver: ComponentFactoryResolver) 
    

    public ngAfterViewInit(): void 
    this.renderComponent(0);
    

    public tabChange(index: number) 
    setTimeout(() => 
        this.renderComponent(index);
    );
    

    private renderComponent(index: number) 
    const factory = 
this.componentFactoryResolver.resolveComponentFactory(this.components[index]);
this.viewContainer.createComponent(factory);

模板

    <mat-tab label="Tab" *ngFor="let component of components">
    <ng-template matTabContent>
        <div #container></div>
    </ng-template>
    </mat-tab>
    </mat-tab-group>

模块

 imports: [
  CommonModule,
  MaterialModuleSet,
  BrowserModule,
  RouterModule.forRoot(routes),
  AppRoutingModule,
  NoopAnimationsModule
// BrowserAnimationsModule]        removed the BrowserAnimationModule