Как динамически переставить вкладки угловых материалов

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.Следовательно, существует ли решение без a * 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.