角2：特定の/ n番目の位置にコンポーネントを動的に追加する

Question

特定のインデックスにコンポーネントを追加できません。例えば、プランカリンクの下に。 PlunkerAddRemoveComponents

ここでは、初めて特定のインデックスにコンポーネントを追加することができます。

export class AddRemoveDynamic { 
    idx: number = 0; 

    constructor(private _dcl: DynamicComponentLoader, private _e: ElementRef) { } 

    add() { 
     this._dcl.loadIntoLocation(DynamicCmp, this._e, 'location').then((ref) => { 
      ref.instance._ref = ref; 
      ref.instance._idx = this.idx++; 
     }); 
    } 
} 

私のシナリオは次のとおりです。[コンポーネントの追加ボタンを

• クリックして3回。それは3行を連続して作成するでしょう。
• 次に、2番目の行の[追加]ボタンをクリックすると、別の行が作成されます。
• そして再び同じボタンをクリックして、それはコンポーネントを作成する1 行ここで

隣に、問題ですが、私はボタンの行を追加するには、次たびにコンポーネントを作成します。

Answer 1

DynamicComponentLoaderは推奨されていません。それは今働いている

class DynamicCmp { 
    _ref: ComponentRef; 
    _idx: number; 
    constructor(private resolver: ComponentResolver, private location:ViewContainerRef) { } 
    remove() { 
    this._ref.dispose(); 
    } 
    add1() { 
    this.resolver.resolveComponent(DynamicCmp).then((factory:ComponentFactory<any>) => { 
     let ref = this.location.createComponent(factory, 0) 
     ref.instance._ref = ref; 
     ref.instance._idx = this._idx++; 
    }); 
    } 
} 

Plunker example