动态组件：动态插入 X 类型的组件

Question

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

首先，一个关于 Component-binding 的问题：在我看到的每篇文章中，模板中都使用了 directive-tag，以便稍后绑定组件。但是，由于我的两个问题，我无法事先将指令放入模板中 - 相反，我需要动态地这样做。

我有一个 "things" 的列表。然而，一个 "thing" 只是 parent，它有很多 children - 这意味着有多种类型的事物，每种都有不同的值。这让我为每个东西都创建了一个组件：每个都有自己的模板。但是，我还想显示那些东西的列表。不过，我事先并不知道它们：我是从服务器上获取它们的。在获得数据之前，我不知道它们的类型或数量。我现在想通过每次添加正确类型的组件来列出每个 "thing"。我将如何正确添加绑定以动态加载组件？
我的用户可以 "style" 他们的个人资料使用不同的模式。生成的布局是从服务器获取的。这意味着，我事先不知道模态的数量或模态的类型。我现在如何才能正确地包含它们？

TL;DR 如何动态绑定组件，而无需为其各自的类型设置正确数量的绑定？

Answer 1

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

您仍然需要将所有组件放在父模板中，但您只显示服务器 returns:

<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>

所以如果服务器 returns:

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

]

那么只会显示这3个。

您还可以根据服务器returns 数据

的顺序对组件进行动态排序

编辑：

如果服务器returnsthinga3次，则显示3次

编辑 2： 示例：

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

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

动态组件：动态插入 X 类型的组件

Dynamic Components: Insert components of type X on the fly

binding

load

dynamic

typescript

angular