Angular2/4中隐藏Angular Material标签页但保留其内容显示

针对你提出的需求——隐藏第一个标签（Tab One）的标签头但保留其内容显示，同时程序层面该标签仍存在，页面加载时默认激活第一个标签且仅显示Tab Two及后续标签，我给你提供一个简洁可行的实现方案：

核心思路 #

我们需要仅隐藏第一个标签的头部元素，而非移除整个标签组件（否则程序层面就不存在了），同时让标签组默认激活第一个标签，这样就能满足内容显示、标签头隐藏、程序层面保留标签的要求。

具体实现步骤 #

1. 模板代码调整

给第一个标签的头部添加自定义类，同时设置标签组默认激活第一个标签（selectedIndex="0"）：

<!-- 旧版Angular Material（md前缀）写法 -->
<md-tab-group selectedIndex="0">
  <md-tab>
    <!-- 给标签头加自定义类用于隐藏 -->
    <md-tab-label class="hidden-tab">Tab One</md-tab-label>
    <div>
      <!-- Tab One的内容，页面加载时默认展示 -->
      这是Tab One的内容，会在页面加载时显示出来
    </div>
  </md-tab>
  <md-tab>
    <md-tab-label>Tab Two</md-tab-label>
    <div>
      这是Tab Two的内容，点击标签可切换显示
    </div>
  </md-tab>
  <!-- 其他标签正常添加即可 -->
</md-tab-group>

<!-- 新版Angular Material（mat前缀，Angular 4+常用）写法 -->
<mat-tab-group selectedIndex="0">
  <mat-tab>
    <mat-tab-label class="hidden-tab">Tab One</mat-tab-label>
    <div>
      这是Tab One的内容，页面加载时默认展示
    </div>
  </mat-tab>
  <mat-tab>
    <mat-tab-label>Tab Two</mat-tab-label>
    <div>
      这是Tab Two的内容，点击标签可切换显示
    </div>
  </mat-tab>
</mat-tab-group>

2. 添加CSS隐藏标签头

在组件的样式文件（.component.css）中添加以下样式，确保第一个标签的头部完全隐藏且不占用空间：

.hidden-tab {
  display: none !important;
}

选择display: none而非visibility: hidden，是因为后者会保留标签头的占位空间，导致标签栏出现空白，不符合"看似不存在"的要求。

关键注意事项 #

• ❌ 不要用*ngIf移除第一个标签：这会直接从DOM中删除该标签组件，程序层面就不存在了，违背需求。
• ❌ 不要给<md-tab>/<mat-tab>添加[hidden]属性：这会隐藏整个标签的内容，无法实现"保留内容显示"的要求。
• ✅ 仅隐藏标签头元素：这样标签组件本身仍存在于DOM中，程序里可以正常访问和操作该标签，同时内容默认显示。

扩展：动态控制标签显示 #

如果后续需要动态显示/隐藏第一个标签头，可以通过绑定类的方式实现：

<!-- 模板中绑定类 -->
<md-tab-label [class.hidden-tab]="isFirstTabHidden">Tab One</md-tab-label>

在组件类中定义变量并控制状态：

// .component.ts
isFirstTabHidden = true; // 默认隐藏第一个标签头

// 可通过方法切换显示状态
toggleFirstTabHeader() {
  this.isFirstTabHidden = !this.isFirstTabHidden;
}

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