如何在Angular2中进行动态转换/子组合?

时间:2015-12-06 23:20:21

标签: angular transclusion

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

详细信息组件由许多不同的产品类型组件组成。在用户输入SKU并单击显示详细信息时,是否可以动态注入子产品类型组件,而不是在详细信息组件中包含所有子产品类型组件?

为什么我要注入子组件是因为添加了像 microwave 这样的新产品类型时,我只需要创建该组件而不是修改产品详细信息父组件。

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

1 个答案:

答案 0 :(得分:0)

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