Angular 材质：如何在隐藏 mat-tab 时隐藏 mat-tab-header？

Question

我有一个基本的

mat-tab-group

，里面嵌套有2个

mat-tab

。两个

mat-tab

都有一个

[hidden]

输入属性，由我的代码中更改的布尔值确定。它对于

mat-tab

本身来说就像一个魅力，这意味着当

[hidden]

输入的表达式值为 false 时，不会显示选项卡。 问题是，

mat-tab-header

仍然可见，并导致单击并转到空选项卡的可能性。

是否有任何解决方案可以将关联的

mat-tab-header

可见性与其相关的

mat-tab

绑定？

我无法使用

ngIf

，因为出于数据处理和生命周期的原因，我确实需要在 DOM 上显示选项卡。

一般情况：

     <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>

Answer 1

为隐藏选项卡添加 CSS 类：

首先，定义一个 CSS 类，用于隐藏 mat-tab-label（标题中的文本标签）以及隐藏时 mat-tab 中可能的其他元素：

CSS
.hidden-tab {
  display: none; /* Hide the entire tab element */
  /* OR */
  .mat-tab-label {
    display: none; /* Only hide the label text */
  }
}

选择最适合您需求的方法。隐藏整个选项卡可确保用户无法单击空白区域，而仅隐藏标签可保留选项卡存在的一些视觉指示。

2. 将类绑定到隐藏属性：

在 Angular 组件的模板中，修改 mat-tab 元素以根据布尔值（isFirstTabHidden 和 isSecondTabHidden）有条件地绑定隐藏选项卡类：

HTML
<mat-tab-group>
  <mat-tab [hidden]="isFirstTabHidden" [label]="tab1" class="hidden-tab *ngIf='!isFirstTabHidden'">
    {{ 1st Tab }}
  </mat-tab>
  <mat-tab [hidden]="isSecondTabHidden" [label]="tab2" class="hidden-tab *ngIf='!isSecondTabHidden'">
    {{ Second Tab }}
  </mat-tab>
</mat-tab-group>

说明：

[hidden]

属性仍然控制选项卡内容的可见性。 class="hidden-tab" 在选项卡隐藏时有条件地添加隐藏类。 如果相应的 isFirstTabHidden 或 isSecondTabHidden 值为 true，则

*ngIf

指令将隐藏整个选项卡元素（包括标签）。这确保隐藏类仅在选项卡实际隐藏而不仅仅是空时应用。