問題描述
如何更改 Angular Material 中的標籤標籤？ (How to change tab label in Angular Material?)
我有標籤組：
<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 的標籤的標籤（標題）？
參考解法
方法 1:
If I understand your question correctly, this is done simply by setting which title you wish to use.
<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>
if you need to set it as a variable, you can insert different variables to each 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>
in TS:
title1 = 'Title 1';
title2 = 'Title 2';
title3 = 'Title 3';
StackBlitz example : https://stackblitz.com/edit/angular‑x4yzr6?file=app/tab‑group‑basic‑example.ts source: https://material.angular.io/components/tabs/overview
方法 2:
You can access MatTabGroup's internal list of tabs to achieve what you want.
In your TS component, add the following lines:
@ViewChild('tabGroup') private tabGroup: MatTabGroup;
ngAfterViewInit() {
this.tabGroup._tabs.first.textLabel = 'New Label';
}
Change your HTML to:
<mat‑tab‑group #tabGroup>
...
</mat‑tab‑group>
(by user3573738、KLTR、adhirajsinghchauhan)