Wie kann ich einen Ereignisemitter für eine dynamisch hinzugefügte Komponente verwenden?

Question

Ausgehend von Eric Martinez 'Antwort von Angular 2 - Adding/Removing components on the fly möchte ich die Anzahl der erstellten Komponenten begrenzen. Und nach dem Löschen einer Komponente versuche ich, dieses Ereignis an das Elternelement zu senden, damit das Elternelement die Anzahl der aktuell erstellten Komponenten kennt.

In diesem Plunker begrenze ich die Anzahl der Komponenten um 4, und dann versuche ich, ein Ereignis auszugeben, um diese Anzahl wieder herunterzusetzen. Das Ereignis wird nicht gesendet. Wie emittieren Sie ein Ereignis von einer dynamisch hinzugefügten Komponente?

Ich postete die Komponenten hier, da stackoverflow Code mit Plunker Links erfordert. Code ist genau der gleiche wie in Plotter

Answer 1

Das Problem hier ist, dass dynamisch geladene Komponenten keine Eltern/Kind-Beziehung mit den Komponenten, in denen sie geladen sind. Deshalb Zugriff auf Eigenschaften aus der dynamisch geladenen Komponente Sie müssen ref.instance.property verwenden. Die Komponente wird nicht zusammen mit dem übergeordneten Element kompiliert, daher weiß das übergeordnete Element nichts über die Komponente foster.

Nun, was gesagt wird, was Sie tun können, ist eine Eigenschaft, die Sie abonnieren können und I wouldn't use an EventEmitter dafür.

Meine Lösung wäre, stattdessen ein Subject zu verwenden (wie ich es in einem eigenen Projekt mache).

Ihre dynamische Komponente würde so aussehen

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

Ihre Komponente in dem Sie die dynamische Komponente sind Laden

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

Hier ist Ihre plnkr Arbeits und aktualisiert beta.12.