Как изменить порядок детей с помощью ContentChildren и QueryList

Question

У меня есть компонент вкладок с коллекцией компонентов вкладок. Коллекция вкладок сохраняется как QueryList с использованием ContentChildren. Как я могу изменить порядок детей, используя QueryList?

@Component({
  selector: 'tab',
  template: `
    <p>{{title}}</p>
  `,
})
export class TabComponent {
  @Input() title;
}

@Component({
  selector: 'tabs',
  template: `
    <ng-content></ng-content>
  `,
})
export class TabsComponent {
 @ContentChildren(TabComponent) tabs: QueryList<TabComponent>

 ngAfterContentInit() {
   this.tabs.forEach(tabInstance => console.log(tabInstance))
 }

 swap() {
   console.log('swapping...');
   const swapped = this.tabs.toArray().reverse();
   this.tabs.reset(swapped);
 }
}

@Component({
  selector: 'my-app',
  template: `
    <tabs>
     <tab title="One"></tab>
     <tab title="Two"></tab>
    </tabs>
    <button (click)="swap()">Swap</button>
  `,
})
export class App {
  @ViewChild(TabsComponent) tabs;

  swap() {
    this.tabs.swap();
  }
}

Answer 1

Вы можете извлечь массив из QueryList, поменять местами и затем сбросить список запросов:

// ...
const arr = this.tabs.toArray();

// swap elements as desired

this.tabs.reset(arr);