Изменение порядка угловых мат-вкладок

Question

Я использую mat-tabs из Angular Material, и мне нужно динамически создавать вкладки в зависимости от некоторых условий.

<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

Вы можете попробовать использовать *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 так, как вы хотите, с вашими условиями

---

РЕДАКТИРОВАТЬ:

После вопроса вкомментарии о *ngIf на <mat-tab>, вот пересмотренный ответ с *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
}];

Answer 2

Вы можете использовать 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) тоже