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

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

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

回答(0)