替代* Ngfor组件

Question

Angular 5中是否有更好的解决方案？

<div *ngFor="let component of components | async">
    <component-1  *ngIf="component.type === 'some-type-1'"></component-1>
    <component-2  *ngIf="component.type === 'some-type-2'"></component-2>
    <component-3  *ngIf="component.type === 'some-type-3'"></component-3>
</div>

Answer 1

作为替代方法，您可以使用自定义管道根据类型过滤组件。显然，您可以自定义管道以更好地适应组件的属性。

<div *ngFor="let component of components | myfilter: 'some-type-1'">
    <component-1></component-1>
</div>

<div *ngFor="let component of components | myfilter: 'some-type-2'">
    <component-2></component-2>
</div>

<div *ngFor="let component of components | myfilter: 'some-type-3'">
    <component-3></component-3>
</div>

Working demo