动态组件中的mat-tab不起作用

Question

每次用户点击按钮时，我都会尝试创建组件。 在这个创建的组件中，我有一些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>

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