なぜコンポーネントをangular2で動的に読み込むときに、コンテナにターゲットを書き込む必要がありますか？

Question

私はWebアプリケーションを構築するためにangular2（v2.2.4）を使用しています。このアプリでは、コンポーネントを動的に読み込む必要があります。私はstackoverflowのほぼすべての相対的な答えを読んで、憂鬱な事実を発見した：私たちは以下のように、このような私たちのコンポーネントをロードするために容器にターゲット要素を記述する必要があります。

<div #target></div>

をその後、我々は、コンテナにそれを使用しますこのようなコンポーネントTSコード：最後に

@ViewChild('target', {read: ViewContainerRef}) vcRef: ViewContainerRef;

、動的にロードされた成分の容器は、DOM内の醜い添加元素<div _ngcontent-mbk-0></div>を有しています。

ここで、なぜ、すべてのコンポーネントをtsファイルに静的に書き込むときに、angular2にターゲット要素は必要ないのですか？もっと良い解決策はありますか？

Answer 1

要素のViewContainerRefにアクセスするにはドキュメント https://angular.io/docs/ts/latest/api/core/index/ViewContainerRef-class.html

によると、あなたは、ElementにViewContainerRefを注入 指令を配置するか、またはあなたはViewChildクエリを経由して にそれを得ます。

またViewContainerRefへの参照を取得する代わりにdivのng-containerまたはtemplateを使用することができます。これらのタグは表示されませんDOM

Answer 2

Angular2は、あらかじめコンパイルをサポートするために作成されています。 コンポーネントテンプレートに書き込む内容は、意味を成す場所にJavaScriptが生成されます。 動的に追加されるコンポーネントの場合、Angular2には、動的コンポーネントを配置するために使用できるフックを生成できるアンカーが必要です。

Angular2は、HTML以外のテクノロジでレンダリングできるように構築されているため、DOMからの読み取りが必要な場合はどこでも抽象化が追加されています。