动态组件:动态插入X型组件

Question

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

首先，一个关于组件绑定的一般问题:在我看到的每一篇文章中，都会在模板中使用指令标记来绑定组件。然而，由于我的两个问题，我不能事先把我的指令放在模板中-相反，我需要动态地这样做。

1. 我有一份“事情”的清单。然而，“东西”只是父母，它有许多子--这意味着有多种类型的事物，每一种都有不同的价值。这让我为每件事创建了一个组件:每个组件都有自己的模板。但是，我也想显示这些东西的列表。不过，我事先并不认识它们:我是从服务器上获取它们的。在得到数据之前，我不知道它们的类型或数量。现在，我想通过每次添加一个正确类型的组件来列出每个“事物”。如何正确地添加绑定以动态加载组件？
2. 我的用户可以“样式”他们的配置文件使用不同的模式。生成的布局是从服务器获取的。这意味着，再次，我不知道情态的数量或类型的模态事先。我现在如何才能适当地将它们包括在内？

博士，我如何动态地绑定组件，而不设置正确数量的绑定和它们各自的类型？

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将被显示。

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

编辑：

如果服务器返回3次thinga，则将显示3次。

编辑2:示例：

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

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