另一个组件内的组件模板

Question

我有主要组件中存储的组件数组。它们有不同的类型。我使用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，因为我必须添加另一个ngSwitch案例。是否有可能使其更通用？

Answer 1

我有3种解决方案，具体取决于您尝试实现的目标。

1. 删除ngSwitch语句并将每个组件的模板包装在*ngIf语句中。您必须创建一个服务来存放用于确定将显示哪些数据的可观察数据（即您的swicth语句中使用的逻辑）。然后，您将这些数据注入每个数据。
2. 角度路由器也是一种选择。
3. （我怀疑这是最好的解决方案）根据您的组件列表的长度，您可以只列出它们并为每个组件添加*ngIf并保留组件上的逻辑。

数组中组件的顺序是否重要？还有，有多少组件？