另一个组件内部的组件模板

Question

i具有存储在主组件中的组件数组。它们是不同类型的。我使用NGFOR和NGSWITCH指令全部显示。

<div *ngFor="let component of components"
         [ngSwitch]="component.id">
        <component-a *ngSwitchCase="1"></component-a>
        <component-b *ngSwitchCase="2"></component-b>
        <component-c *ngSwitchCase="3"></component-c>
</div>

当我添加新类型时，这种方法很有问题，例如componentx，beacuse我必须添加另一个ngswitch案例。是否有可能使其更通用？

Answer 1

我有3个解决方案，具体取决于您要实现的目标。

1. 删除ngSwitch语句，并将每个组件的模板包装在 *ngif语句中。您必须创建一项服务，以容纳可观察到的数据，以确定将显示哪些内容（即Swicth语句中使用的逻辑）。然后，您将将数据注入每个。
2. 角路由器也是一种选项。
3. （我怀疑这是最好的解决方案），具体取决于您的组件列表的时间，您只需列出它们，并在每个组件上添加 *ngif并将逻辑保留在组件上。

阵列中组件的顺序根本重要吗？另外，有多少个组件？