angular 9 使用查询列表（contentChildren 或 ViewChildren）对兄弟姐妹 dom 重新排序/排序答案

【问题标题】：angular 9 reorder/sort siblings dom by using querylist(contentChildren or ViewChildren)angular 9 使用查询列表（contentChildren 或 ViewChildren）对兄弟姐妹 dom 重新排序/排序
【发布时间】：2021-04-25 07:30:15
【问题描述】：

我想知道 Angular 是否允许您对同级 DOM 重新排序/排序。

例如，如果我想重新排列（更改顺序）opt 组件。我该怎么做？

my-lib-select 是一个选择或下拉组件，opt 是一个子组件，用于生成选择选项。

组件是在其他组件中生成或渲染的。

即app.component.ts

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

在my-lib-select，我有一个查询列表

  @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);
}

但这不是对兄弟姐妹进行排序或排序。

我知道，我可以对app.component.ts 中的finalCompOptions 进行排序，但我想对my-lib-select 中的选项进行排序。

有人可以帮我解决这个问题吗？

提前致谢。

【问题讨论】：

为什么不通过 my-lib-select anald 中的 finalCompOptions 也从那里渲染 opts..？在这里对 DOM 进行排序确实不是一个好的解决方案（它会与 Angular 发生冲突）
是的，我能做到。但是如果我想自定义选项内容。假设我想将图像添加到某些选项中，而另一些则不。而且我知道我可以使用 Ng 模板，但我仍然想知道是否可以更改兄弟顺序以用于安全建议。

标签： javascript angular dom angular9

【解决方案1】：

我觉得你有两种方法可以解决这个问题。

方法 1 - 在通过 ngFor 渲染/传递它们之前重新排序 app.component.ts 中的项目。

方法 2 - 使用自定义管道 like seen in this answer here 重新排序

【讨论】：