选项卡选项卡中的mat选项卡不起作用

Question

当选项卡内的选项卡时，如果选择的子选项卡索引为1，则它应显示为已选中。

让父标签有两个标签，selectedIndex为0，父标签1中的子标签为selectedIndex = 1，然后显示内容但未显示为已选中。标签内容正在显示但未选中标签

以下是工作 example

Answer 1

目前有一个open issue。作为一种解决方法，您可以在父选项卡selectedIndex上使用双向绑定，然后仅在选择父选项卡时显示子选项卡组：

<mat-tab-group [(selectedIndex)]="index">
  <mat-tab label="Tab 1">Parent tab 1 Content</mat-tab>
  <mat-tab label="Tab 2">
    <mat-tab-group *ngIf="index == 1" [selectedIndex]="1">
      <mat-tab label="Tab 1">sub tab 1 Content </mat-tab>
      <mat-tab label="Tab 2">sub tab 2 Content
      </mat-tab>
    </mat-tab-group>
  </mat-tab>
</mat-tab-group>

Demo

Answer 2

一种对我有用的解决方法是在.ts上设置

parentTabSelected = false;     

handleMatTabChange(event: MatTabChangeEvent) {
        const index= localStorage.getItem('parentTab');
        if (event.index === Number(index)) {
            this.parentTabSelected = true;
        }
    }

然后在我的html文件中，我在<mat-tab-group>元素(selectedTabChange)="handleMatTabChange($event)"上调用了该函数，并在<mat-tab *ngIf="parentTabSelected">上使用了该函数。