実行時にAngular 2でDOMに新しいComponent要素を追加してもコンポーネントがレンダリングされない

DOMに新しいノードを動的に（実行時に）追加しようとしています。新しいノードは基本的にコンポーネントセレクタです。問題は、コンポーネントのコンテンツがレンダリングされないため、結果に空のHTMLタグがあることです。実行時にAngular 2でDOMに新しいComponent要素を追加してもコンポーネントがレンダリングされない

私はAngular 2.0のドキュメントの例を使用しており、大文字と小文字を区別するために少し修正しました。

Here is the plunker

私はすべてのコードを再利用することであり、私は、新しい売上税の要素を作成するために、身体にクリックしたとき。明らかにそれは動作していません。

これはbodyのontopを追加した新しいスクリプト要素です。

<script> 
    function add(){ 
    var element = document.createElement('sales-tax'); 
    document.getElementsByTagName("my-app")[0].appendChild(element); 
    } 
</script>

この機能は本体をクリックすると呼び出されます。

<body onclick="add()"> 
    <my-app>Loading...</my-app> 
</body>

これが結果です。あなたが見ることができるように、レンタルされているテンプレートのプレランタイムに追加された販売税は、実行時に追加するものは空です。

出典

2016-05-20 Tek

私は別のルートを行くだろう。いくつかの 'sales-tax'要素が並んでいるので、それをリストにして、それに新しいSalesTax「インスタンス」を追加してみてはどうでしょうか？「売上税」はどこに属していますか？あるいは、要素を繰り返す方法について実際にテストしていますか？ [* ngFor]（https://angular.io/docs/ts/latest/ap/common/NgFor-directive.html）を参照してください。 – rinukkusu

問題は、動的に要素を追加したいということです。繰り返し要素についてではありません。 – Tek

それでもあなたが好きな場所にボタンを作って、注射可能なサービスを利用してデータを保持するだけです。（あなたがAngularコンポーネントの中からそれをやっていることを認めて） – rinukkusu

createComponent()バージョン：Plunker

this.resolver.resolveComponent(HeroListComponent).then((factory:ComponentFactory<any>) => { 
     this.cmpRef = this.theBody.createComponent(factory) 
    });

beta.17（非推奨）.loadNextToLocation()とバージョン：Plunker(deprecated)

addCmp(){ 
    console.log('adding'); 
    this.dcl.loadNextToLocation(HeroListComponent, this.theBody); 
    }

あなたはあなただけのhtmlを作成しているコンポーネントを作成していません要素と同じ名前を持つことが起こるDOMに追加するeにコンポーネントセレクタを追加します。

あなたが望むものを達成するためには、DynamicComponentLoaderを使用する必要があります。

出典

2016-05-20 09:45:16 echonax

この場合の使用方法の例を挙げることはできますか？ – rinukkusu

ただそれを実装しようとしています.. – Tek

それは間違いなく私がやろうとしていることへの一歩です...私はそれを私の必要に合わせて調整する必要があります。ありがとうechonax;） – Tek

角度は、実際のDOMを生成するinteranlly DOMをレンダリングし、片方向のみである、Zone.jsを使用してそれらを結合し、DOMへの変更は検出されません。
Angularは、Zone.jsのスコープ内で実行された場合のみ変更を検出します。
次に、コンポーネントを実際に動作させて残りのアプリケーションとバインドするための他のinteranlバインディングと生成プロシージャがあります。あなたがしようとしているものを達成するために
、あなたは@echonaxが述べたようにDynamicComponetLoaderを使用する必要がありますが、それは、が今を廃止予定なので、あなたの代わりにViewContainerRef.createComponent()を使用する必要があります。 implementaionについては

（彼は気にしない願っています。）THIS AnswerやグンターのPLUNKER @を参照してください

出典

2016-05-20 09:57:11

実行時にAngular 2でDOMに新しいComponent要素を追加してもコンポーネントがレンダリングされない

答えて

関連する問題