Angular2：配列内の各オブジェクトをdomにプッシュするループdynamiccomponentloader？

Question

私はオブジェクトの配列をロールバックし、各インデックスのプロパティをAngular2コンポーネントの入力パラメータとして使用したいと思っています。

Bcこれらのコンポーネントは再帰的ですが、内部でdynamiccomponentloaderの関数を使用する必要があります。 （* ngForではなく）このオブジェクトの配列を横断するループ

私はコンポーネントのテンプレートマークアップをli（ulの内側にある）の中に置く例を探しています。

私はloadAsRoot、loadIntoLocation、または、loadNextToLocationだけではなく、私はこれを実証するためのplnkrやフィドルのために最も感謝されるその前の内容

を置き換えるのでULの内側に新しい李を追加することができますどのように特定していません。それは、ターゲットを削除し、別のコンポーネントを追加するために再利用することができないよりもので、あなたがloadAsRoot()を使用することはできません

Answer 1

Plunker example beta.17
Plunker example beta.9

import {Component, DynamicComponentLoader, ElementRef, Input} from 'angular2/core' 

@Component({ 
    selector: 'dyn-cmp', 
    template: ` 
    <h2>Dynamic {{name}}</h2> 
` 
}) 
export class DynCmp { 
    @Input() name:string; 
} 

@Component({ 
    selector: 'my-app', 
    directives: [], 
    template: ` 
    <h2>Hello {{name}}</h2> 
    <div #target></div> 
` 
}) 
export class App { 
    list = ['a', 'b', 'c']; 
    constructor(private dcl:DynamicComponentLoader, private elRef:ElementRef) { 
    this.name = 'Angular2'; 
    } 

    ngAfterViewInit() { 
    this.list.forEach((val) => { 
     this.dcl.loadIntoLocation(DynCmp, this.elRef, 'target') 
     .then(cmpRef => cmpRef.instance.name = val); 
    }); 
    } 
} 

あなたの助けのために事前にありがとうございます。