在 mat 选项卡上将无选项卡设置为默认活动选项卡答案

【问题标题】：Set no tab as default active tab on mat tab在 mat 选项卡上将无选项卡设置为默认活动选项卡
【发布时间】：2019-05-17 23:23:37
【问题描述】：

我使用mat-tab 实现了搜索功能，我不需要在初始加载时选择选项卡。只有当用户单击特定选项卡时，选项卡才会激活。

目前，第一个选项卡在加载时处于活动状态。我试过设置selectedIndex="null"，但没有用。另外，我需要在单击按钮时重置选定的选项卡。

【问题讨论】：

标签： angular angular-material mat-tab

【解决方案1】：

当前 API 版本中没有预定义选项可以取消选择所有选项卡，因为这暗示至少应该有一个选项卡处于活动状态。但是有一个小解决方法（恕我直言，这似乎很好）：我们可以在索引0 处再添加一个辅助选项卡，将其留空（没有任何内容）并使用display: none 隐藏它。这样您就有了额外的不可见选项卡，并且您仍然可以选择导航到此选项卡，这看起来非常接近取消选择所有选项卡。

只需几行 HTML / CSS 即可实现。

HTML：

<button (click)="tabs.selectedIndex = 0">RESET</button>
<mat-tab-group #tabs>
  <mat-tab></mat-tab> <!-- ADDITIONAL TAB -->
  <mat-tab label="First">
    <p>Content 1</p>
  </mat-tab>
  <mat-tab label="Second">
    <p>Content 2</p>
  </mat-tab>
  <mat-tab label="Third">
    <p>Content 3</p>
  </mat-tab>
</mat-tab-group>

CSS：

::ng-deep .mat-tab-labels > .mat-tab-label:first-child {
  display: none;
}

这是一个有效的STACKBLITZ，您可以看到它的实际效果。

【讨论】：

谢谢！我的想法与解决方法相同。
基于当前的 AM 功能，这是我能想象到的最好的方法。希望你的情况没问题

【解决方案2】：

我的感觉是，如果您最初不想呈现任何选项卡内容或单元格内容已被单击。您可以隐藏内容，直到单击选项卡面板。如下所示：

.HTML

<mat-tab-group (selectedTabChange)="onTabPanelClick($event, $event.tab)">

        <mat-tab label="First-Tab">
          <div class="col-md-12" *ngIf="isFirstTabVisible">
          </div>
        </mat-tab>

        <mat-tab label="Second-tab">
          <div class="col-md-12" *ngIf="isSecondTabVisible">
          </div>
        </mat-tab>

        <mat-tab label="Third-tab">
          <div class="col-md-12" *ngIf="isThirdTabVisible">
          </div>
        </mat-tab>

</mat-tab-group>

.ts

onTabPanelClick(event, tab) {
   this.isFirstTabVisible= (event.index === 0) ? true : false;
   this.isSecondTabVisible= (event.index === 1) ? true : false;
   this.isThirdTabVisible= (event.index === 2) ? true : false;
}

【讨论】：

最初您必须将所有选项卡可见性设置为 false。 isFirstTabVisible = false、isSecondTabVisible = false 和 isThirdTabVisible = false

【解决方案3】：

mat 选项卡处于活动状态

mat-tab-label-active

::ng-deep .mat-tab-label-active {
  background-color : red;
  font-size : 15px
}

【讨论】：