Question

我有一个Tabs组件，其中包含Tab组件的集合。标签集使用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);

如何使用ContentChildren和QueryList重新排序子级

1 个答案: