angular - 更改 Angular mat-tab 的顺序

Question

我正在使用 Angular Material 中的 mat-tabs，我需要根据某些条件动态创建选项卡。

<mat-tab-group #tabsGroup (selectedTabChange)="tabChanged($event)" (selectedIndexChange)="selectedIndexChange($event)" [(selectedIndex)]="selectedIndex">
    <mat-tab id="tab0" label="First tab">
        // Tab content
    </mat-tab>
    <mat-tab id="tab1" label="Second tab">
        // Tab content
    </mat-tab>
    <mat-tab id="tab2" label="Third tab">
        // Tab content
    </mat-tab>
<mat-tab-group>

根据某些条件，我需要能够生成这样的选项卡:

<mat-tab-group #tabsGroup (selectedTabChange)="tabChanged($event)" (selectedIndexChange)="selectedIndexChange($event)" [(selectedIndex)]="selectedIndex">
    <mat-tab id="tab1" label="Second tab">
        // Tab content
    </mat-tab>
    <mat-tab id="tab0" label="First tab">
        // Tab content
    </mat-tab>
    <mat-tab id="tab2" label="Third tab">
        // Tab content
    </mat-tab>
<mat-tab-group>

MatTabs API 上是否有设置或我可以通过 JavaScript 执行一些技巧来实现此目的？谢谢!

Answer 1

您可以使用 ng-template 来实现此目的，如下所示。

<ng-template #content1>
  <div>Content 1</div>
</ng-template>

<ng-template #content2>
  <div>Content 2!</div>
</ng-template>

然后在您的选项卡中相应地使用。

<mat-tab id="tab0" [label]="yourFirstLabel">
    <div *ngIf="yourFlag; then content1 else content2"> </div>
</mat-tab>
<mat-tab id="tab1" [label]="yourSecondLabel">
    <div *ngIf="yourFlag; then content2 else content1"> </div>  
</mat-tab>

请注意，您还需要更新标签(yourFirstLabel 和 yourSecondLabel)