winkel 1.5 Komponenten Kommunikation/Datenaustausch zwischen Controllern

Question

Ich bin sehr neu in der Angular-Typescript-Konzept.

Set up ist Typoskript, Angular 1.5 Komponenten, wenn möglich, nicht $ Umfang zu nutzen

Eine Komponente Sucheingabefelder hat. Eine andere Komponente sollte den Rückgabewert vom Dienst erhalten und rendern.

Wie viele Artikel online vorschlagen, Service für die gemeinsame Nutzung von Daten zwischen Controllern (Komponenten) zu verwenden. Aber diese Lösungen passen nicht wirklich zu meinem Fall. Es ist entweder rein eckig oder $ Scope oder keine Verwendung von Typoskript.

Meine bisherigen Ergebnisse: Wenn versuchen, die Variable durch den Dienst passieren ist unter der Steuerung der ersten Komponente erscheint. Der Controller der zweiten Komponente wird nicht getroffen, und die übergebene Variable/Parameter (über Konstruktor) hat keinen Wert.

finden Sie in den Kommentaren unten für Codebeispiel

Answer 1

Sie eine Variable aus dem Controller an die Komponenten binden kann.

Zum Beispiel: auf jede Komponente definieren eine searchModel namens Bindung, die 2-Wege ist Bindung, so <comp-a> und <comp-b> als die Komponenten gegeben und Controller $ctrl wie die Steuerung der Ansicht, in der die Komponenten verwendet werden, können Sie Dazu:

<div> 
    <!-- $ctrl is the controller of the view --> 
    <comp-a search-model="$ctrl.search"></comp-a> 
    <comp-b search-model="$ctrl.search"></comp-b> 
</div> 

Da die zwei Komponenten und gebunden an das gleiche Modell auf den view-Controller, wenn man es ändert (zum Beispiel comp-a, die die „Suche“ Komponente ist), werden die andere Komponente erhalten die Änderung auch.

Dies ist nützlich, wenn Sie mehrere Instanzen der Komponenten verwenden können, sodass Sie jeden Satz von 2 Komponenten mit einer anderen Modellvariablen auf dem Ansichtscontroller verbinden können.

<div> 
    <!-- $ctrl is the controller of the view --> 
    <comp-a search-model="$ctrl.search"></comp-a> 
    <comp-b search-model="$ctrl.search"></comp-b> 

    <!-- changes in $ctrl.search2 will not reflect to comp-b above, only the one below --> 
    <comp-a search-model="$ctrl.search2"></comp-a> 
    <comp-b search-model="$ctrl.search2"></comp-b> 
</div> 

Answer 2

können Sie WinkelEreignisse verwenden zwischen Controllern in einem Asynchron-Art und Weise zu kommunizieren. Abonnieren Sie Ihren Listener-Controller mit $ scope. $ On ('inputChanges') und wenn sich die Eingabe ändert (Sie müssen die $ watch- oder ng-change-Direktive verwenden, um die Änderung zu erkennen), senden Sie das Ereignis mit $ rootScope. $ Broadcast oder $ scope. $ Emittieren (Was Sie verwenden sollten, ist eine Frage der Eltern/Kinder-Controller-Struktur, siehe den Unterschied bei der eckigen Dokumente https://docs.angularjs.org/api/ng/type/ $ rootScope.Scope).

Über den $ scope und nicht verwenden, empfiehlt Angular jetzt ControllerAs Syntax zu verwenden, aber es gibt kein Problem mit $ Scope überhaupt zu verwenden. Seien Sie vorsichtig bei der Verwendung einmal verbindlich, um unnötige Beobachter zu vermeiden und denken Sie daran, es in Ihrem Controller und Konstruktor mit injizieren injizieren $.