Welches ist für Modi besser geeignet? Sendung gegen Bindung?

Question

Ich habe derzeit eine übergeordnete Komponente und mehrere untergeordnete Komponente.

<parent-component> 
    <child-component ng-data="$ctrl.object.fieldone"></child-component> 
    <child-component ng-data="$ctrl.object.fieldtwo"></child-component> 
    ... 
    <button ng-click='$ctrl.setEdit();">Edit</button> 
</parent-component> 

Jedes Kind Komponente wird entweder die Daten angezeigt werden, die Daten unter Verwendung von Formularelemente darstellen Edit-Modus unter Verwendung einer Reihe von divs/Spannweiten darstellt Ansichtsmodus oder anzuzeigen.

Die übergeordnete Komponente hat eine Schaltfläche, die editMode auslöst.

Was ist der beste Weg, um die Kindkomponenten darüber zu informieren, dass der Status Editiermodus ist? Es scheint eine Menge verschiedener Möglichkeiten zu geben, diesen Zustand zu vermitteln: Der Elternteil könnte Broadcast oder die EditMode-Variable des Elternteils könnte mit der Kind-Komponente verknüpft werden. Gibt es noch einen besseren Weg als diese beiden?

Nehmen Sie gut über 20-30 untergeordnete Komponenten und dass diese Komponenten in verschiedenen Ansichten verwendet werden.

Danke,

Answer 1

Theoretisch sollte Broadcast nur für anwendungsweite Ereignisse verwendet werden. Stellen Sie sich Anmelde-/Abmeldungsbenachrichtigungen, Websocket-Ereignisse usw. vor.

Wenn Sie beginnen, Broadcast für kleine Ereignisse zu verwenden, werden Sie überall in Ihrer App mit Tonnen von Ereignissen enden, und Sie werden nicht wissen, welcher von was ausgelöst wird.

Wenn Ihre App klein genug ist und nur aus einer übergeordneten Komponente und untergeordneten Elementen besteht, bei denen das Hauptereignis darin besteht, einen booleschen Editiermodus einzuschalten, ist es in Ordnung, Broadcast zu verwenden.

Für etwas größeres als das können Sie natürlich Bindings stattdessen verwenden. In Ihrem speziellen Fall fühlt es sich ein wenig schwer auf die HTML-Elemente, um ein Attribut zu jedem Ihrer 30 Kinder hinzuzufügen.

Die Tatsache, dass Sie eine Eltern-/Kinderhierarchie verwenden, bedeutet, dass Sie require verwenden können. Wenn Sie das übergeordnete Element in jeder Ihrer untergeordneten Komponenten benötigen, können Sie dessen Eigenschaften automatisch verwenden. Auf diese Weise können Sie eine Variable editMode übergeben, die skalierbar ist, wenn Sie in Zukunft mehr Daten übertragen müssen.

var parent = { 
 
    controller: ParentController, 
 
    template:` 
 
    <button ng-click="$ctrl.editionMode = !$ctrl.editionMode">Edition</button> 
 
    <br><br> 
 
    <child></child> 
 
    ` 
 
} 
 

 
function ParentController() { 
 
    this.editionMode = false; 
 
} 
 

 
var child = { 
 
    require: { parent: '^^parent' }, 
 
    controller: ChildController, 
 
    template: ` 
 
    <input type="text" ng-model="$ctrl.value" ng-if="$ctrl.parent.editionMode"> 
 
    <span ng-if="!$ctrl.parent.editionMode">{{$ctrl.value}}</span> 
 
    ` 
 
} 
 

 
function ChildController() { 
 
    this.value = "edit me"; 
 
} 
 

 
angular.module('myApp', []); 
 
angular.module('myApp') 
 
    .component('parent', parent) 
 
    .controller('ParentController', ParentController) 
 
    .component('child', child) 
 
    .controller('ChildController', ChildController);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.9/angular.min.js"></script> 
 
<div ng-app="myApp"> 
 
    <parent></parent> 
 
</div>

Answer 2

Übersicht

$broadcast: ein Ereignis name nach unten auf alle untergeordneten Bereiche Dispatches (und deren Kinder), die registrierten $rootScope.Scope Zuhörer anmelde ...... einfach rieseln es funktioniert bis zu veröffentlichen Sie die Veranstaltung. Die Verwendung von $broadcast erstellt eine Abhängigkeit von $ rootScope.then, wenn ich Nein für die Verwendung von $ rootScope wählen, dann müssen meine Controller die $ scope-Hierarchie verstehen und entsprechend $broadcast sein können. Hier ist der Spaß Teil davon ... Testen Sie das! Ein ereignisbasierter Ansatz kann sehr unordentlich werden, um zu verfolgen, zu warten und zu debuggen. Es macht es sehr asynchron, ohne wirkliche einfache Möglichkeit, den Fluss einer Anwendung

binding zu verfolgen: in Angular apps Datenbindung ist die automatische Synchronisation von Daten zwischen dem Modell und Ansicht Komponenten. Angularjs hat eine ein- und zweiseitige Datenbindung (Siehe Referenz). Dies führt mich schnell zum Thema Umfang, da Sie beim Binden die Bereichshierarchien und die Ansicht kennen müssen, auf die Sie zugreifen können, was ziemlich einfach ist ....