Question

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

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

我有一个“事物”列表。然而，“东西”只是父母，它有许多孩子 - 意味着有多种类型的东西，每种东西都有不同的价值。这让我为每件事创建了一个组件：每个组件都有自己的模板。但是，我还想显示这些内容的列表。我事先并不知道它们：我是从服务器取出它们的。在获取数据之前，我不知道他们的类型或数量。我现在想通过每次添加正确类型的组件来列出每个“事物”。如何正确添加绑定以动态加载组件？
我的用户可以使用不同的模式“设置”他们的个人资料。生成的布局从服务器获取。意思是，我再次不知道模态的数量或模态的类型。我现在如何能够正确地包括它们？

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

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

修改

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

编辑2： 例如：

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

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

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

1 个答案: