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

Question

我有标签组：

  <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 的选项卡的标签（标题）？

Answer 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

Answer 2

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

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

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

将您的 HTML 更改为：

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

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

How to change tab label in Angular Material?

angular-material

angular

angular7

angular8