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将使我们能够控制“活动”标签，但我想控制安排的顺序（加载时）。

我在父级和选项卡之间进行了大量数据通信，因此未使用* ngFor。因此，有一个没有 * ngFor。

的解决方案。

Angular材料是否提供此功能？

Answer 1

有一种方法可以做到，但是我不知道它是否适合您的应用程序。 MatTab具有应执行此操作的position属性。但这不是@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;
    ...
}

Answer 2

您可以将所有选项卡存储在数组中，然后OnInit根据所需条件对数组进行排序。

或在任何事件加载等情况下

然后，当然，可以在* ngFor指令的帮助下将它们循环。

如何动态重新排列Angular材质选项卡

2 个答案: