गतिशील रूप से जोड़े गए घटक पर मैं इवेंट एमिटर का उपयोग कैसे कर सकता हूं?

Question

Angular 2 - Adding/Removing components on the fly से एरिक मार्टिनेज के उत्तर से काम करना, मैं बनाए गए घटकों की मात्रा को सीमित करना चाहता हूं। और फिर एक घटक को हटाने के बाद, मैं उस घटना को अभिभावक को उत्सर्जित करने की कोशिश कर रहा हूं ताकि माता-पिता वर्तमान में बनाए गए घटकों की संख्या को जान सकें।

इस Plunker में, मैं 4 से घटकों की संख्या को सीमित करता हूं, और फिर मैं नीचे की गिनती को कम करने के लिए किसी ईवेंट को उत्सर्जित करने का प्रयास कर रहा हूं। घटना उत्सर्जित नहीं हो रही है। आप गतिशील रूप से जोड़े गए घटक से किसी ईवेंट को कैसे उत्सर्जित करते हैं?

// dynamic component 
@Component({ 
    selector : 'dynamic', 
    template : ` 
    <div> 
     Component number {{_idx}} <button (click)="remove()">Remove</button> 
    </div>` 
}) 
class DynamicCmp { 
    _ref: ComponentRef; 
    _idx: number; 
    @Output lowerIndex = new EventEmitter<any>(); 
    remove() { 
     this._ref.dispose(); 
     this.lowerIndex.emit(true); 
    } 
} 

// Parent container component  
@Component({ 
    selector: 'my-app', 
    template : ` 
     <button (click)="add()">Add new component</button> 
     <div #location (lowerIndex)="lowerIndex();"></div> 
    ` 
}) 
export class App { 
    idx: number = 0; 
    constructor(private _dcl: DynamicComponentLoader, private _e: ElementRef) {} 

    lowerIndex() { 
     this.idx--; 
     console.log("subtracted"); 
    } 

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

      console.log("added") 
     } 
    } 
} 

मैंने यहां घटक पोस्ट किए हैं क्योंकि स्टैक ओवरफ्लो को प्लंकर लिंक के साथ कोड की आवश्यकता होती है। कोड प्लंबर

Answer 1

यहां देखा गया है कि समस्या यह है कि गतिशील रूप से लोड किए गए घटकों में उन घटकों के साथ अभिभावक/बाल संबंध नहीं होते हैं जहां वे लोड होते हैं। यही कारण है कि गतिशील रूप से लोड किए गए घटक से गुणों का उपयोग करना आपको ref.instance.property का उपयोग करना होगा। घटक को माता-पिता के साथ संकलित नहीं किया जा रहा है, इसलिए माता-पिता फोस्टर घटक के बारे में कुछ भी नहीं जानता है।

अब कहा जा रहा है कि आप क्या कर सकते हैं, उस संपत्ति को बनाने के लिए जिसे आप सब्सक्राइब कर सकते हैं और I wouldn't use an EventEmitter इसके लिए।

मेरा समाधान इसके बजाय विषय का उपयोग करना होगा (जैसा कि मैं अपनी खुद की एक छोटी परियोजना में कर रहा हूं)।

आपका गतिशील घटक इस

class DynamicCmp { 

    // Subject instead of an EventEmitter 
    lowerIndex: Subject<boolean> = new Subject(); 

    remove() { 
     // We send true, although in the example is not being used 
     this.lowerIndex.next(true); 

     // Remove the component from the view 
     this._ref.dispose(); 
    } 
} 

आपका घटक जहां गतिशील घटक

template : '<div #location></div>'; // Note that I removed (lowerIndex)="..." 
this._dcl.loadIntoLocation(DynamicCmp, this._e, 'location').then((ref) => { 
    //... 

    // Subscribe to the Subject property 
    ref.instance.lowerIndex.subscribe(v => { 
     this.idx--; 
     console.log("subtracted"); 
    }); 
}); 

यहाँ अपने plnkr काम कर रहा है और beta.12 के लिए अद्यतन लोड कर रहे हैं की तरह लग रहे हैं।