向 mat-tab-group 添加按钮

Question

我是 Angular 2/4 的新手，并且一直很喜欢 Material Design 组件 (https://material.angular.io)。我有一个简单的 SPA，它使用选项卡组在动态视图之间切换。我有一个加号按钮，用于添加更多选项卡，每个选项卡都可以自行删除。

我的问题是是否可以更改 mat-tab-group 以包含上栏中（选项卡出现的位置）中的“加号”按钮。现在它位于 mat-tab-group div 旁边的 div 中，因此沿着我的网页的整个右侧占据了 20px，这看起来不太好。

Answer 1

一种方法是添加另一个没有内容的禁用选项卡，并将单击事件附加到选项卡标签中的按钮。

<mat-tab-group>
    <mat-tab label="Tab 1">Tab 1 Content</mat-tab>
    <mat-tab label="Tab 2">Tab 2 Content</mat-tab>
    <mat-tab disabled>
        <ng-template mat-tab-label>
            <button mat-icon-button (click)="someFn()">
                <mat-icon>add_circle</mat-icon>
            </button>
        </ng-template>
    </mat-tab>
</mat-tab-group>

唯一奇怪的是选项卡标签的宽度。我一直不知道如何减少这个特定的。

Answer 2

在我的 styles.css 中是否删除了禁用的样式并减小了选项卡的大小：

my-component .mat-tab-labels :last-child.mat-tab-label {
  min-width: 0;
  padding: 0 12px;
  color: unset;
  opacity: unset;
}

其中“my-component”是组件的 html 选择器。

看起来像这样：

Answer 3

正如贾里德回答的那样。不过，您可以通过在组件中将 ViewEncapsulation 设置为

None

来更改最后一个选项卡的宽度。

打字代码：

import {Component, ViewEncapsulation} from '@angular/core';

@Component({
  ....
  encapsulation: ViewEncapsulation.None
})

现在您可以设置最后一个选项卡的样式

组件CSS：

.mat-tab-label:last-child {
  opacity: 1;
  min-width: 20px;
  padding: 0;
}

Answer 4

这是另一种解决方案

..ts

  @ViewChild(MatTabGroup) tabGroup!: MatTabGroup;

  onSelectedTabChange(tabIndex: number) {
    console.log('Selected tab index: ', tabIndex);
    if (tabIndex === $INDEX_OF_BUTTON) {
      this.tabGroup.selectedIndex = 0;
    }
  }

..html

<mat-tab-group (selectedIndexChange)="onSelectedTabChange($event)">
    <mat-tab label="Tab 1">Tab 1 Content</mat-tab>
    <mat-tab label="Tab 2">Tab 2 Content</mat-tab>
    <mat-tab>
        <ng-template mat-tab-label>
            <button mat-icon-button (click)="someFn()">
                <mat-icon>add_circle</mat-icon>
            </button>
        </ng-template>
    </mat-tab>
</mat-tab-group>