動的にロードされたコンポーネントでバインディングが機能しない

Question

コンポーネントが動的にロードされると、テンプレート内のバインディングが一切動作しないという問題が発生します。これと同様に、ngOnInitメソッドはトリガされません。

loadView() { 
    this._dcl.loadAsRoot(Injected, null, this._injector).then(component => { 
     console.info('Component loaded'); 
    }) 
    } 

動的にロードされたコンポーネント

import {Component, ElementRef, OnInit} from 'angular2/core' 

declare var $:any 

@Component({ 
    selector: 'tester', 
    template: ` 
     <h1>Dynamically loaded component</h1> 
     <span>{{title}}</span> 
    ` 
}) 

export class Injected implements OnInit { 

    public title:string = "Some text" 

    constructor(){} 

    ngOnInit() { 
     console.info('Injected onInit'); 
    } 

} 

これは私が間違ってそれを実装しようとするかもしれないと思う動的にロードされたコンポーネントを使用して、私の最初の時間です。

ここには、問題を示すplunkrがあります。どんな助けもありがとう。

Answer 1

Eric Martinezは、loadAsRootの使用に関連する既知のバグであることを指摘しました。推奨される回避策は、loadNextToLocationまたはloadIntoLocationを使用することです。

私が動的にロードしようとしていたコンポーネントは、fixedcssの位置付けを持つコンポーネント内部からのモーダルダイアログだったので、これは問題でした。私はまた、どのコンポーネントからモーダルをロードし、それが動的にロードされたコンポーネントに関係なくDOMの同じ位置に注入する機能を望んでいました。

私の解決策は、forwardRefを使用して、自分のモーダルを動的にロードするコンポーネントにルートAppComponentを注入することでした。

を：私は今、呼び出すことができます戻る私の他のコンポーネント（私は動的にモーダルをロードしたい1）中のアプリの ElementRef

@Component({ 
    selector: 'app', 
    template: ` 
     <router-outlet></router-outlet> 
     <div #modalContainer></div> 
    `, 
    directives: [RouterOutlet] 
}) 

export class AppComponent { 

    constructor(public el:ElementRef) {} 

    getElementRef():ElementRef { 
     return this.el; 
    } 

} 

を返すメソッドを持っている私のAppComponentで

constructor (
    ......... 
    ......... 
    private _dcl: DynamicComponentLoader, 
    private _injector: Injector, 
    @Inject(forwardRef(() => AppComponent)) appComponent) { 

    this.appComponent = appComponent; 
} 

this._dcl.loadIntoLocation(ModalComponent, this.appComponent.getElementRef(), 'modalContainer').then(component => { 
    console.log('Component loaded') 
}) 

これはおそらく同様の問題を持つ他の人に役立つでしょう。

Answer 2

DOMからコンポーネントインスタンスを削除する必要はありません。 コンポーネントインスタンスを作成して削除するには、angular2/coreパッケージの 'componentRef'を使用します。 モーダルコンポーネントを目的の場所にロードするにはshow（）を使用し、loadIntoLocationを2回呼び出す前にhide（）を使用してコンポーネントインスタンスを破棄します。例えばのための

：

@Component({ 
    selector: 'app', 
    template: ` 
    <router-outlet></router-outlet> 
    <div #modalContainer></div> 
`, 
    directives: [RouterOutlet] 
}) 
export class AppComponent { 
    private component:Promise<ComponentRef>; 

    constructor(public el:ElementRef) {} 

    getElementRef():ElementRef { 
    return this.el; 
    } 

    show(){ 
    this.component = this._dcl.loadIntoLocation(ModalComponent,this.appComponent.getElementRef(), 'modalContainer').then(component => {console.log('Component loaded')}) 
    } 

    hide(){ 
    this.component.then((componentRef:ComponentRef) => { 
     componentRef.dispose(); 
     return componentRef; 
    }); 
    } 
}