angular 9 使用查詢列表（contentChildren 或 ViewChildren）對同級 dom 重新排序/排序

Question

我想知道 angular 是否允許您重新排序/排序兄弟 DOM。

例如，如果我想重新排列（更改順序） opt組件。 我該怎么做？

my-lib-select是 select 或 Dropdown 組件，而opt是用於生成 select 選項的子組件。

像這樣在其他組件中生成或渲染組件。

即app.component.ts

<my-lib-select [customComparator]="customComparatorFn">
  <opt *ngFor="let x of finalCompOptions">{{x}}</opt> 
</my-lib-select>

在my-lib-select ，我有一個 QueryList

  @ContentChildren(OptComponent, {descendants: true, read: OptComponent})
  options: QueryList<OptComponent>;
....
if (this.customComparator) {
   const arr = this.options.toArray();
   arr.sort(this.customComparator);
   this.options.reset(arr);
}

但這不是對兄弟姐妹進行排序或排序。

我知道，我可以對finalCompOptions中的app.component.ts進行排序，但我想對my-lib-select中的選項進行排序。

有人可以幫我解決這個問題嗎？

提前致謝。

Answer 1

我覺得你有兩種方法可以解決這個問題。

方法 1 - 在通過 ngFor 渲染/傳遞它們之前重新排序 app.component.ts 中的項目。

方法 2 - 您使用自定義 pipe 重新排序， 就像在此答案中看到的一樣