动态零部件:动态插入X类型的零部件

Question

我想要实现两件事。两者都需要巧妙地使用组件。

首先，关于组件绑定的一个问题：在我看过的每一篇文章中，都在模板中使用了一个指令标记，以便稍后绑定组件。然而，由于我的两个问题，我不能预先将指令放入模板中——相反，我需要动态地这样做。

1. 我有一份"事物"清单。然而，"事物"只是父母，它有很多孩子——这意味着有多种类型的事物，每种事物都有不同的价值观。这让我为每件事创建了一个组件：每件事都有自己的模板。然而，我也想显示这些东西的列表。不过，我事先并不了解它们：我正在从服务器上获取它们。在获得数据之前，我不知道它们的类型或数量。我现在想通过每次添加一个正确类型的组件来列出每个"东西"。如何正确添加绑定以动态加载组件？

2. 我的用户可以通过使用不同的模态来"设计"他们的个人资料。生成的布局是从服务器获取的。这意味着，再一次，我事先不知道语气词的数量或语气词的类型。我现在如何才能正确地将它们包括在内？

TL；DR如何动态绑定组件，而不必为它们各自的类型设置适当数量的绑定？

Answer 1

当组件信息来自服务器时，可以做一件事：

您仍然需要将所有组件放在父模板中，但您只显示服务器返回的内容：

<div *ngFor="let dynamic of fromServer" [ngSwitch]="dynamic .id">
<thing-a *ngSwitchCase="'thinga'" [data]="dynamic"></thing-a>
<thing-b *ngSwitchCase="'thingb'" [data]="dynamic"></thing-b>
<thing-c *ngSwitchCase="'thingc'" [data]="dynamic"></thing-c>
<thing-d *ngSwitchCase="'thingd'" [data]="dynamic"></thing-d>
<thing-e *ngSwitchCase="'thinge'" [data]="dynamic"></thing-e>
<thing-f *ngSwitchCase="'thingf'" [data]="dynamic"></thing-f>
</div>

因此，如果服务器返回：

[
{ id : "thinga" }
{ id : "thingd" }
{ id : "thingf" }
]

那么将只显示这3个。

您还可以根据服务器返回数据的顺序对组件进行动态排序

编辑：

如果服务器返回thinga3次，则会显示3次。

编辑2:示例：

[
{ id : "thinga", title: "Yes"}
{ id : "thinga", title: "No" }
{ id : "thinga", title: "Maybe" }
]

每个thinga组件将获得自己的数据