angular - 如何在 Angular2 中进行动态嵌入/子组合？

Question

我有以下产品详细信息组件，用户可以在其中键入产品 SKU。此 SKU 可以是书籍、数字产品、饮料、电视或游戏机。根据该 SKU，将显示详细信息。SKU 只能属于一种类型。

详细信息组件由许多不同的产品类型组件组成。除了在 details 组件中包含所有子产品类型组件，是否可以在用户输入 SKU 并单击show details时动态注入子产品类型组件？

为什么我要注入子组件是因为当添加了新的产品类型（如微波）时，我只需要创建该组件而不修改产品详细信息父组件。

<product>
    <input [value]="productSKU" (input)="productSKU = $event.target.value">
    <button (click)="showProductDetails()">Show Product Details</button>
</product>
<details>
    <notfound></notfound>
    <book></book>
    <digital></digital>
    <drink></drink>
    <tv></tv>
    <gameconsole></gameconsole>
</details>

Answer 1

Angular2 有ComponentFactoryResolver可以创建动态组件。