Angular “材质”选项卡中的“角度-动态零部件”

我有一个垫子标签组（角材料），我想能够添加垫子标签后面的代码，包括其他组件。我正在使用ComponentFactoryResolver创建组件，但无法通过ViewContainerRef将新组件添加到“新mat”选项卡

html

---

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

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>

---

我还替换了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>

---

我不确定我是否理解你的问题。为什么不在指令中添加所需的组件？i、 我将有一个菜单，我将根据从菜单中选择的内容打开具有不同组件的新选项卡。

    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