每次用户点击按钮时，我都会尝试创建组件 . 在这个创建的组件中，我有一些DOM，包括 mat-tab-group 和两个 mat-tab . 不幸的是，第二个标签内容为空，两个标签之间的切换不起作用 .

以下是我在父元素中创建组件的方法（比如 MapComponent.ts ）：

private createComponent(): IInfoWindowComponent {
    const factory = this.componentFactoryResolver.resolveComponentFactory(IInfoWindowComponent);
    const ref = this.viewContainerRef.createComponent(factory);
    ref.changeDetectorRef.detectChanges();

    return ref.instance;
}

这是我的动态组件视图（ IInfoWindowComponent.html ）：

<mat-tab-group (selectChange)="toggleSomething()">
        <mat-tab label="Résumé" id="sumup-tab">
            <p>wow what a tab!</p>
        </mat-tab>
        <mat-tab label="Logistique" id="logistique-tab">
            <p>Hi there!</p>
        </mat-tab>
    </mat-tab-group>

问题是，在不同的视图中，我正在使用材料选项卡而没有问题 . 这就是为什么我很确定这种行为是由于动态组件创建...但是我知道如何解决这个问题？

angular angular-material2