将无选项卡设置为垫选项卡上的默认活动选项卡

Question

我已经使用实施了搜索功能mat-tab，不需要在初始加载时选择任何标签。仅当用户单击特定选项卡时，选项卡才应激活。

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

Answer 1

当前的API版本中没有预定义的选项可以取消选择所有标签，因为这意味着至少应激活一个标签。但是有一个小的解决方法（IMHO看起来非常不错）：我们可以在索引处再添加一个辅助标签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，您可以看到它的实际使用。