angular - Angular2で動的トランスクルージョン/子合成を行うには?

Question

ユーザーが製品 SKU を入力できる次の製品詳細コンポーネントがあります。この SKU は、本、デジタル製品、飲み物、テレビ、またはゲーム コンソールです。その SKU に基づいて、詳細が表示されます。SKU は 1 つのタイプにのみ属することができます。

詳細コンポーネントは、さまざまな製品タイプ コンポーネントで構成されています。すべての子製品タイプ コンポーネントを詳細コンポーネントに含める代わりに、ユーザーが SKU を入力して [詳細を表示] をクリックしたときに、子製品タイプ コンポーネントを動的に挿入することは可能ですか?

子コンポーネントを挿入する理由は、電子レンジのような新しい製品タイプが追加されたときのためです。そのコンポーネントを作成するだけで、製品の詳細の親コンポーネントを変更する必要はありません。

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