如何不使用*ngIf根据条件显示Angular的<mat-tab>元素？

我有以下代码：

<mat-tab-group>
<mat-tab [hidden]="!file" label="Example">
Content
 </mat-tab>
</mat-tab-group>

希望仅当file存在时显示该<mat-tab>元素，但无法使用*ngIf（仍需访问模板中的引用变量），而[hidden]并非<mat-tab>的有效属性。

已尝试的方案：

• <mat-tab [ngStyle]="{'display' : file ? 'none' : 'block'}">：该方案对mat-tab-group有效，但对mat-tab无效；
• 使用如下代码：

<mat-tab-group>
    <mat-tab>
        <ng-template mat-tab-label>
            <span [hidden]="!file">Example</span>
        </ng-template>
        Content
    </mat-tab>
</mat-tab-group>

此方案仅在file存在时显示标签文本，但无标签的tab仍可见；

• 为mat-tab指定对应CSS类（已添加ViewEncapsulation: None）：样式被直接忽略。

由于mat-tab的渲染逻辑由mat-tab-group管控，直接设置display或hidden无法生效，可尝试以下几种方法：

方法1：深度CSS隐藏tab #

给mat-tab绑定动态类，通过深度选择器强制隐藏tab的标签和内容：

<mat-tab-group>
  <mat-tab [class.hidden-tab]="!file" label="Example">
    Content
    <!-- 模板引用变量可保留在此处，比如 #tabContent -->
  </mat-tab>
</mat-tab-group>

组件内添加CSS（使用::ng-deep穿透组件封装）：

::ng-deep .hidden-tab .mat-tab-label,
::ng-deep .hidden-tab .mat-tab-body {
  display: none !important;
}

这种方式不会销毁tab元素，既能保留模板引用，又能在file不存在时完全隐藏tab。

方法2：动态过滤tab数组（多tab场景适用） #

在组件类中维护原始tab数组（用于保存引用）和过滤后的可见tab数组：

// 组件类
originalTabs = [
  { label: 'Example', show: () => !!this.file }
];

get visibleTabs() {
  return this.originalTabs.filter(tab => tab.show());
}

@ViewChildren('tabRef') tabRefs!: QueryList<MatTab>;

模板中遍历可见tab，同时保留引用变量：

<mat-tab-group>
  <mat-tab 
    *ngFor="let tab of visibleTabs" 
    [label]="tab.label"
    #tabRef>
    Content
  </mat-tab>
</mat-tab-group>

通过tabRefs可访问所有tab的模板引用，同时实现了显示控制。

方法3：视觉隐藏+禁用交互 #

如果CSS穿透不生效，可通过透明和禁用点击的方式实现视觉隐藏：

<mat-tab 
  [style.opacity]="file ? 1 : 0"
  [style.pointer-events]="file ? 'auto' : 'none'"
  label="Example">
  Content
</mat-tab>

该方法下tab仍会占据布局位置，但视觉不可见且无法交互，适合对布局影响较小的场景。

内容的提问来源于stack exchange，提问作者Entire-Commercial860