Komponentenkommunikation in Winkel 1.5

Question

Angular 1.5-Komponenten-Kommunikationsvorschläge verfügen normalerweise über Ausgabebindungen zum Aufrufen von Methoden auf Stammcontrollern.

Angenommen, ich habe eine Root-Komponente und zwei untergeordnete Komponenten.

<root> 
    <child-1></child-1> 
    <child-2></child-2> 
</root> 

Es möchte eine auf eine Schaltfläche klicken auf die Komponente reagieren, indem sie einen Wert auf die Komponente zwei zu lesen und dann etwas in der Wurzel zu tun.

Zum Beispiel ist child-1 eine Direktive, die eine Zeichnungsbibliothek umschließt, die eine Zeichnung an ihren DOM-Knoten anhängt und über eine Variable verfügt, um diese Zeichnung zu steuern.

child-2 hat einen Knopf. Wenn darauf geklickt wird, sollten Daten von der child-1 Variable an root übergeben werden, was etwas damit macht.

Speziell child-1 wraps var graph2d = new vis.Graph2d(container, dataset, options);. Später möchte ich einige Informationen von graph2d abrufen und an root weiterleiten, um etwas damit zu tun.

Das läuft darauf hinaus: Wie können Komponenten auf Ereignisse anderer Komponenten reagieren? Die Vorschläge für Inputs und Outputs scheinen dieses Szenario nicht zu erfassen.

Answer 1

In eckigen 1,5 können Sie erfordern und/oder Eigenschaft Bindungen (Eingang/Ausgang) zu kommunizieren.

Wenn Sie die benötigt Eigenschaft verwenden, dann würde Ihre Root-Komponente eine api und Ihr Kind Komponente veröffentlichen würde einen Verweis auf den Controller erhalten:

angular.module('app').component('child1', { 
    bindings: {}, 
    require: {api: '^root'}, //your <root> component 
    template: '', 
    controller: controller 
}); 

Sie können dann mit den Methoden der Wurzelkomponente in Ihr Kind Komponente:

$ctrl.api.addWatchedBook(); 

Dies ist die Wurzel Component-Controller-Funktion:

Hier

ist ein kompletter architectual Überblick: Component Communications