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 重新排序， 就像在此答案中看到的一样