如何动态重新排列 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;
    ...
}