गतिशील रूप से लोड किए गए घटक में काम नहीं कर रहे बाइंडिंग

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 का उपयोग करना है।

मेरे लिए यह समस्याग्रस्त था क्योंकि जिस घटक को मैं गतिशील रूप से लोड करने की कोशिश कर रहा था वह fixed सीएसएस स्थिति के साथ एक घटक के अंदर एक मोडल संवाद था। मैं किसी भी घटक से मोडल लोड करने की क्षमता चाहता था और इसे डीओएम में उसी स्थिति में इंजेक्शन दिया था, चाहे वह किस घटक से गतिशील रूप से लोड किया गया हो।

मेरा समाधान forwardRef का उपयोग करने के लिए मेरे रूट AppComponent को उस घटक में इंजेक्ट करने के लिए किया गया था जो गतिशील रूप से मेरे मोडल को लोड करना चाहता है।

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

    this.appComponent = appComponent; 
} 

मेरी AppComponent मैं एक तरीका है जिसके रिटर्न एप्लिकेशन की 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; 
    } 

} 

मेरे अन्य घटक (एक है कि मैं गतिशील से मोडल लोड करना चाहते हैं) में वापस मैं अब कॉल कर सकते हैं है में:

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

शायद यह समान समस्याओं वाले अन्य लोगों की सहायता करेगा।

Answer 2

डीओएम से घटक उदाहरण को साफ करने की आवश्यकता नहीं है। घटक उदाहरण बनाने और निपटाने के लिए कोणीय 2/कोर पैकेज से 'घटक आरएफ' का उपयोग करें। वांछित स्थान पर मोडल घटक लोड करने के लिए शो() का उपयोग करें (लोड) को लोड करने से पहले घटक उदाहरण का निपटान करने के लिए() को छुपाएं।

उदाहरण के लिए

:

@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; 
    }); 
    } 
}