Angular2: दो-तरफा घटक के लिए बाध्यकारी डेटा गतिशील DynamicComponentLoader

Question

मैं एक Angular2 एप्लिकेशन विकसित करने कर रहा हूँ का उपयोग कर डाला, और मैं एक समस्या का सामना करना पड़ा:

मैं विभिन्न वस्तुओं है कि यूआई का उपयोग कर चयन किया जा सकता का एक सेट है। इनमें से प्रत्येक ऑब्जेक्ट में विकल्पों का एक सेट होता है (विभिन्न ऑब्जेक्ट्स के लिए अलग) जिसे यूआई का उपयोग करके संपादित किया जा सकता है। अब, मैं वर्तमान में चयनित ऑब्जेक्ट के लिए एक विशिष्ट घटक डालने के लिए डायनामिक कॉम्पोनेंट लोडर का उपयोग कर रहा हूं, इसलिए यह अपने विकल्पों को सही तरीके से संभाल सकता है। समस्या यह है कि मुझे नहीं पता कि वर्तमान में चयनित ऑब्जेक्ट के डेटा को गतिशील रूप से सम्मिलित विकल्प घटक में कैसे बाध्य करना है।

@Component({ 
    selector: 'dynamic', 
    template: `<div>Options:</div> 
      <div>Property1: <input type="number" /></div> 
      <div>Property2: <input type="text" /></div>` 
    // template: `<div>Options:</div> 
    //   <div>Property1: <input type="number" [(ng-model)]="currentSelection.property1" /></div> 
    //   <div>Property2: <input type="text" [(ng-model)]="currentSelection.property1" /></div>` 
}) 
class DynamicComponent { 

} 


@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Selected: {{currentSelection.name}}!</h2> 
     <div #container></div> 
    </div> 
    ` 
}) 
class App { 
    currentSelection = {name: 'Selection1', property1: 10, property2: 'test'}; 

    constructor(private loader: DynamicComponentLoader, private elementRef: ElementRef) { 
    loader.loadIntoLocation(DynamicComponent, elementRef, 'container'); 
    } 
} 

Here आप मेरे सवाल को समझने में मदद करने के लिए एक plunker है:

Answer 1

angular2 और Rxjs साथ

, "Observables" लगभग हमेशा जवाब कर रहे हैं।

तो मैं आपकी समस्या को सही ढंग से समझ में आया, तो आप अपने DynamicComponent एक "Observer" और अपने कंटेनर "एक Observable या और भी बेहतर एक Subject (मामले में अपने कंटेनर एक और नमूदार की सदस्यता के लिए से चयन पाना चाहता है)" बनाने की जरूरत है। फिर, अपने गतिशील घटक को लोड करने के बाद, इसे अपने कंटेनर पर सब्सक्राइब करें।

जब भी आपके कंटेनर पर चयन बदल जाता है, तो आप नए चयन को अपने ग्राहकों को धक्का देते हैं। इस तरह, आप कई गतिशील घटकों को लोड कर सकते हैं और सभी आपके धक्का प्राप्त करेंगे।

कंटेनर:

class App { 
    currentSelection = {}; 
    selections = [ 
    {name: 'Selection1', property1: 10, property2: 'test'}, 
    {name: 'Selection2', property1: 20, property2: 'test2'} 
    ]; 
    subject:Subject<any> = new Subject(); 

    constructor(private loader: DynamicComponentLoader, private elementRef: ElementRef) { 
    } 

    ngOnInit(){ 
    this.loader.loadIntoLocation(DynamicComponent, this.elementRef, 'container', this.injector) 
    .then(compRef =>this.subject.subscribe(compRef.instance)); 
    // subscribe after loading the dynamicComponent 
    } 

    // set the new selection and push it to subscribers 
    changeSelection(newSelection){ 
    this.currentSelection = newSelection; 
    this.subject.next(this.currentSelection); 
    } 
} 

ऑब्जर्वर:

class DynamicComponent implements Observer{ 
    public currentSelection = {}; 

    next(newSelection){ 
    this.currentSelection = newSelection; 
    } 
} 

यहाँ अपने plunker मेरे संपादन के बाद काम कर रहा है,

"मैं नवीनतम कोणीय beta.6 को आयात बदल प्रदान की"

मुझे पता है कि यह एक बहुत पुराना सवाल है। लेकिन उम्मीद है कि किसी को इस जवाब से फायदा होगा।

Answer 2

यहां आप क्या कर सकते हैं, अपना कोड constructor से ngOnInit पर ले जाएं और गतिशील मान निर्दिष्ट करने के लिए वादे का उपयोग करें।

ngOnInit(){ 
    this.dynamicComponentLoader.loadIntoLocation(DynamicComponent, this.elementRef,'container').then((component)=>{ 
     component.instance.currentSelection = currentSelection; 
    }); 
}