如何動態重新排列 Angular 材質選項卡

Question

我有一組 7 個標簽（角材料）：

<mat-tab-group #tabGroup [selectedIndex]="selectedIndex">
    <mat-tab label="Tab 1">Content 1</mat-tab>
    <mat-tab label="Tab 2">Content 2</mat-tab>
    <mat-tab label="Tab 3">Content 3</mat-tab>
    <mat-tab label="Tab 4">Content 4</mat-tab>
    <mat-tab label="Tab 5">Content 5</mat-tab>
    <mat-tab label="Tab 6">Content 6</mat-tab>
    <mat-tab label="Tab 7">Content 7</mat-tab>
</mat-tab-group>

我想根據某些條件設置選項卡排列的順序。

所以我想要一個場景中的tab7, tab5, tab6, tab1, tab2 ,tab3, tab4 。

我知道selectedIndex會讓我們控制 ACTIVE 選項卡，但我想控制排列順序（加載時）。

我在父級和選項卡之間有很多數據通信，因此沒有使用 *ngFor。 因此，有沒有沒有*ngFor 的解決方案。

Angular 材料是否提供此功能？

Answer 1

您可以將所有選項卡存儲在數組中，然后 OnInit 使用您想要的條件對數組進行排序。

或在任何事件上加載等。

然后，當然，在 *ngFor 指令的幫助下循環它們。

Answer 2

可能有一種方法可以做到這一點，但我不知道它是否適合您的應用程序。 MatTab有一個位置屬性應該這樣做。 但它不是@Input ，因此要使用它，您必須使用@ViewChild來訪問所有選項卡（或者，如果可能，請使用來自 HTML 的模板引用）。 這有點笨拙，但它應該有效。 例如（偽代碼）：

<mat-tab-group #tabGroup [selectedIndex]="selectedIndex"  >
    <mat-tab #tab1 label="Tab 1">Content 1</mat-tab>
    <mat-tab #tab2 label="Tab 2">Content 1</mat-tab>
    ...
</mat-tab-group>

----

@ViewChild('tab1') tab1;
@ViewChild('tab2') tab2;
...

changeTabOrder() {
    this.tab1.position = 2;
    this.tab2.position = 1;
    ...
}