Angular Material：隐藏mat-tab时如何同步隐藏mat-tab-header？

我用Angular Material的mat-tab-group嵌套了两个mat-tab，每个标签页通过[hidden]绑定动态布尔值控制内容隐藏。但[hidden]只生效在标签页内容上，对应的头部标签依然显示，点击后会进入空标签页。因为要保留标签页在DOM中处理数据和生命周期，不能用*ngIf，想知道怎么让头部标签和对应的标签页同步隐藏。

示例代码：

<mat-tab-group>
  <mat-tab [hidden]="isFirstTabHidden" [label]="tab1">
    {{1st Tab}}
  </mat-tab>
  <mat-tab [hidden]="isSecondTabHidden" [label]="tab2">
    {{Second Tab}}
  </mat-tab>
</mat-tab-group>

方法1：CSS样式穿透+类绑定（无额外组件逻辑） #

这种方法靠CSS关联标签页和头部元素，不需要编写额外组件逻辑。

1. 修改模板，给每个mat-tab绑定条件类：

<mat-tab-group>
  <mat-tab 
    [hidden]="isFirstTabHidden" 
    [label]="tab1"
    [ngClass]="{'hidden-tab': isFirstTabHidden}">
    第一个标签页内容
  </mat-tab>
  <mat-tab 
    [hidden]="isSecondTabHidden" 
    [label]="tab2"
    [ngClass]="{'hidden-tab': isSecondTabHidden}">
    第二个标签页内容
  </mat-tab>
</mat-tab-group>

2. 在组件的SCSS/CSS文件中添加穿透样式：

::ng-deep {
  mat-tab-group {
    .mat-tab-header .mat-tab-label {
      &:nth-child(1) {
        display: var(--tab-1-display, flex);
      }
      &:nth-child(2) {
        display: var(--tab-2-display, flex);
      }
    }
  }

  mat-tab.hidden-tab:nth-child(1) {
    --tab-1-display: none;
  }

  mat-tab.hidden-tab:nth-child(2) {
    --tab-2-display: none;
  }
}

这种写法用CSS变量关联标签页和头部，避免硬编码ID，适配性更强。

方法2：组件逻辑动态控制头部显示 #

通过@ViewChild获取MatTabGroup实例，监听隐藏条件变化后直接操作头部标签样式。

1. 组件类代码：

import { Component, ViewChild, OnChanges, SimpleChanges } from '@angular/core';
import { MatTabGroup } from '@angular/material/tabs';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.scss']
})
export class YourComponent implements OnChanges {
  isFirstTabHidden = false;
  isSecondTabHidden = false;

  @ViewChild(MatTabGroup) tabGroup!: MatTabGroup;

  ngOnChanges(changes: SimpleChanges) {
    if (changes['isFirstTabHidden'] || changes['isSecondTabHidden']) {
      this.updateTabHeaders();
    }
  }

  private updateTabHeaders() {
    const tabLabels = this.tabGroup._elementRef.nativeElement.querySelectorAll('.mat-tab-label');
    if (tabLabels.length >= 2) {
      tabLabels[0].style.display = this.isFirstTabHidden ? 'none' : 'flex';
      tabLabels[1].style.display = this.isSecondTabHidden ? 'none' : 'flex';
    }
  }
}

模板保持原结构即可，适合需要复杂逻辑控制的场景。

方法3：禁用属性+CSS隐藏（最简单） #

如果可以接受标签被禁用，这种方法最省事：

1. 模板中给mat-tab添加[disabled]绑定：

<mat-tab-group>
  <mat-tab 
    [hidden]="isFirstTabHidden" 
    [label]="tab1"
    [disabled]="isFirstTabHidden">
    {{1st Tab}}
  </mat-tab>
  <mat-tab 
    [hidden]="isSecondTabHidden" 
    [label]="tab2"
    [disabled]="isSecondTabHidden">
    {{Second Tab}}
  </mat-tab>
</mat-tab-group>

2. 添加CSS隐藏禁用的头部标签：

::ng-deep {
  .mat-tab-label[aria-disabled="true"] {
    display: none !important;
  }
}

注意：此方法会将标签设为禁用状态（无法点击），若仅需隐藏无需禁用，不推荐使用。

内容的提问来源于stack exchange，提问作者RR1000