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>

Answer 2

正如@GünterZöchbauer在评论中建议的那样，这个答案使用ngComponentOutlet来动态地对组件进行排序

<ng-container 
    *ngFor="item in sortedComponent" 
    *ngComponentOutlet="item.component">
</ng-container>

sortedComponent = [
    {index: 4, component: 'componentA'},
    {index: 5, component: 'componentB'},
    {index: 2, component: 'componentC'},
].sort((a, b) => a.index > b.index)

以角度排序组件

2 个答案: