angular - 以 Angular 订购组件

Question

我需要在下面的模板中对组件进行动态排序

<div class="orderList">
    <componentA></componentA>
    <componentB></componentB>
    <componentC></componentC>
</div>

按对象喜欢

orders: {
    componentA: 2,
    componentB: 3,
    componentC: 1
}

所以我希望首先看到 componentC，然后是 componentA，最后是 componentB？

注意:组件多于三个

Answer 1

使用 CSS 弹性顺序属性

<div style="display:flex;">
   <componentA [style.order]="orders.componentA"></componentA>
   <componentB [style.order]="orders.componentB"></componentB>
   <componentC [style.order]="orders.componentC"></componentC>
</div>