更改 Angular mat-tabs 的顺序

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 ）

Answer 2

您可以尝试使用*ngFor来保持标签动态

html

<mat-tab-group #tabsGroup (selectedTabChange)="tabChanged($event)" (selectedIndexChange)="selectedIndexChange($event)" [(selectedIndex)]="selectedIndex">
    <mat-tab *ngFor="let tab in tabList" id="{{tab.tabId}}" label="tab.label">
        <div [innerHtml]="tab.innerHtml"></div>
    </mat-tab>
<mat-tab-group>

ts

tabList = [{
  label: 'First Tab',
  innerHtml: `<div>hello, World!</div>`,
  tabId: 'tab1'
}, {
  label: 'Second Tab',
  innerHtml: `<div>I am a different Tab</div>`,
  tabId: 'tab2'
}];

然后从那里你可以根据你的条件对this.tabList对象进行排序

---

编辑：

在对<mat-tab>上的*ngIf评论提出问题后，这里是*ngIf语句的修订答案

html

<mat-tab-group #tabsGroup (selectedTabChange)="tabChanged($event)" (selectedIndexChange)="selectedIndexChange($event)" [(selectedIndex)]="selectedIndex">
    <ng-template ngFor let-tab [ngForOf]="tabList">
        <mat-tab *ngIf="tab.showTab || someHideFunction(tab)" id="{{tab.tabId}}" label="tab.label">
            <div [innerHtml]="tab.innerHtml"></div>
        </mat-tab>
    </ng-template>
<mat-tab-group>

ts

tabList = [{
  label: 'First Tab',
  innerHtml: `<div>hello, World!</div>`,
  tabId: 'tab1',
  showTab: true
}, {
  label: 'Second Tab',
  innerHtml: `<div>I am a different Tab</div>`,
  tabId: 'tab2',
  showTab: false
},  {
  label: 'Third Tab',
  innerHtml: `<app-custom-component [input]="tempVariable"></app-custom-component>`,
  tabId: 'tab3',
  showTab: true
}];