如何更改 Angular Material 中的标签标签？答案

【问题标题】：How to change tab label in Angular Material?如何更改 Angular Material 中的标签标签？
【发布时间】：2019-09-02 19:15:25
【问题描述】：

我有标签组：

  <mat-tab-group [selectedIndex]="tabService.activeTabIndex()" (selectedTabChange)="tabChanged($event)">
    <mat-tab label="{{ tabTitle }}"></mat-tab>
  <mat-tab label="{{ tabTitle }}"></mat-tab>
</mat-tab-group>>

如何更改索引为 0 的选项卡的标签（标题）？

【问题讨论】：

标签： angular angular-material angular7 angular8

【解决方案1】：

如果我正确理解您的问题，只需设置您希望使用的标题即可。

<mat-tab-group>
  <mat-tab label="First"> Content 1 </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

如果需要设置为变量，可以在每个label插入不同的变量。

<mat-tab-group>
  <mat-tab [label]=title1> Content 1 </mat-tab>
  <mat-tab [label]=title2> Content 2 </mat-tab>
  <mat-tab [label]=title3> Content 3 </mat-tab>
</mat-tab-group>

在 TS 中：

  title1 = 'Title 1';
  title2 = 'Title 2';
  title3 = 'Title 3';

StackBlitz 示例：https://stackblitz.com/edit/angular-x4yzr6?file=app/tab-group-basic-example.ts 来源：https://material.angular.io/components/tabs/overview

【讨论】：

我知道。但我需要动态更改它，
我只知道我想要更改的索引选项卡
@user3573738 我已经编辑了这个问题。如果我帮助了你，请标记为已解决:)

【解决方案2】：

您可以访问 MatTabGroup 的内部选项卡列表来实现您想要的。

在您的 TS 组件中，添加以下行：

@ViewChild('tabGroup') private tabGroup: MatTabGroup;
ngAfterViewInit() {
    this.tabGroup._tabs.first.textLabel = 'New Label'; 
}

将您的 HTML 更改为：

<mat-tab-group #tabGroup>
    ...
</mat-tab-group>

【讨论】：