Comunicazione dei componenti in angolare 1.5

Question

I suggerimenti di comunicazione angolare di 1,5 componenti di solito hanno collegamenti di uscita per richiamare i metodi sui controller principali.

Diciamo che ho un componente root e due componenti figlio.

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

Sarebbe come reagire a un pulsante click sul componente uno per la lettura di un valore su due componenti e quindi fare qualcosa nella radice.

Ad esempio, child-1 è una direttiva che include una libreria di disegni che collega un disegno al suo nodo DOM e dispone di una variabile per controllare tale disegno.

child-2 ha un pulsante. Quando si fa clic, i dati dalla variabile child-1 devono essere passati a root che fa qualcosa con esso.

In particolare, child-1 avvolge var graph2d = new vis.Graph2d(container, dataset, options);. In seguito, vorrei recuperare alcune informazioni da graph2d e passarle a root per fare qualcosa con esso.

Questo si riduce a: come possono reagire i componenti agli eventi emessi da altri componenti? I suggerimenti di input e output non sembrano coprire questo scenario.

Answer 1

In angolare 1.5 è possibile utilizzare richiedono e/o binding immobili (ingresso/uscita) per comunicare.

Se si utilizza la proprietà richiede quindi il componente principale avrebbe pubblicato un API e il componente bambino sarebbe ottenere un riferimento al controller:

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

è possibile utilizzare i metodi del componente principale in il componente del bambino:

$ctrl.api.addWatchedBook(); 

Questa è la funzione di controllo componente principale:

$ctrl.addWatchedBook = addWatchedBook; 

function addWatchedBook(bookName){ 

    booksWatched.push(bookName); 

} 

Ecco una completa panoramica architettonico: Component Communications