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

【问题标题】：How to dynamically rearrange Angular material tabs如何动态重新排列 Angular 材质选项卡
【发布时间】：2019-03-26 22:07:03
【问题描述】：

我有一组 7 个标签（Angular 材质）：

<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 材料是否提供此功能？

【问题讨论】：

你说的场景有多少？只有一两个，还是他们可以按照他们想要的任何顺序排列它们？
我有 3 个场景。在加载时，选项卡排列将完成。（不是任何顺序）基本上是在 UI 代码中硬编码顺序。

标签： angular typescript tabs angular-material2

【解决方案1】：

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

或任何事件 onload 等。

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

【讨论】：

我添加的代码是一个基本示例。我有很多数据通信，因此不使用 *ngFor。我正在寻找不应用 *ngFor 的解决方案
你有很多数据通信是什么意思？由于每个选项卡的内容太复杂而无法执行 *ngFor?

【解决方案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;
    ...
}

【讨论】：