将按钮添加到 mat-tab-group答案

【问题标题】：Add buttons to mat-tab-group将按钮添加到 mat-tab-group
【发布时间】：2018-04-13 00:38:59
【问题描述】：

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

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

【问题讨论】：

能否使用 CSS 将按钮的样式更改为 position:relative 并设置 left: -30px ？

标签： angular angular-material2

【解决方案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>

唯一奇怪的是标签标签的宽度。我一直无法弄清楚如何减少那个特定的。

【讨论】：

如何选择最新创建的标签页？
我还没有测试过它，但是查看MatTabGroup API，有一个名为selectedIndex 的输入，您可以在该组件上设置它。例如，<mat-tab-group [selectedIndex]="1"> 其中 1 将被替换为动态方式来检索新标签索引。
禁用的技巧很酷。没有这个，我遇到了显示带有“+”的选项卡的问题，但实际上那里没有数据。谢谢！
有没有办法使禁用选项卡中的按钮看起来不禁用？
在mat-tab 中添加button 的任何其他方式？我正在使用角材料

【解决方案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 选择器。

看起来像这样： tabs with add button

【讨论】：

我使用my-component ::ng-deep .mat-tab-labels :last-child.mat-tab-label让它工作