我目前有一個父組件和幾個子組件。哪種模式更適合？廣播與綁定？

<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>

每個子組件要麼：顯示使用一系列代表觀看模式的div /跨距的數據或顯示使用表示編輯模式形式的元素中的數據。

父組件有一個觸發editMode的按鈕。

什麼是最好的方式來通知孩子組件狀態是編輯模式？似乎有很多不同的方式來傳遞這種狀態：父節點可以是Broadcast或父節點的editMode變量可以綁定到子組件。除了這兩者之外還有更好的辦法嗎？

假設遠遠超過20-30個子組件，並且這些組件將用於不同的視圖。

感謝，

來源

2016-12-02 user2340824

從理論上講，廣播只能用於應用程序範圍的事件。想象一下登錄/註銷通知，websockets事件等等。

如果您開始使用廣播進行小型活動，您的應用程序中隨處可見大量事件，並且您不知道哪個觸發了哪個事件。

如果您的應用程序足夠小，並且僅由父組件和兒童組成，其中主事件將切換編輯模式布爾值，那麼使用廣播就可以。

對於任何比這個更大的東西，你可以明顯地使用綁定。在你的特定情況下，它會讓你的30個孩子中的每一個都添加一個屬性。你可以使用require這個事實。通過要求每個子組件中的父代，您可以自動使用其屬性。通過這種方式，您可以傳遞一個editMode變量，並且在將來需要傳遞更多數據時，它可以擴展。

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>

來源

2016-12-02 07:55:37 gyc

「在html元素上感覺有點沉重，爲你的30個孩子添加屬性。」 - 這正是我的感受。雖然它會起作用，但我並不覺得僅僅簡單地表示editState就可以添加額外的屬性。 – user2340824

概述

$broadcast：將事件調度name下所有子作用域（及其子女）通知註冊$rootScope.Scope聽衆......簡單地把它涓滴功能發佈活動。如果我選擇不使用$ rootScope，則使用$broadcast將創建對$ rootScope.then的依賴關係，那麼我的控制器必須瞭解$ scope層次結構並能夠相應地$broadcast。這裏有趣的部分...嘗試測試！基於事件的方法可能會非常雜亂，無法跟蹤，維護和調試。這使得它非常異步，沒有真正的簡單的方法來跟蹤應用程序的流程

binding：數據綁定在角應用是模型和視圖組件之間的數據的自動同步。 Angularjs具有單向和雙向數據綁定（請參閱參考資料）這很快引導我談論範圍，因爲在綁定時必須知道範圍層次結構和視圖才能訪問，這很容易......

來源

2016-12-02 07:30:38

就這樣，對業績的基礎上，我建議您瞭解更多關於綁定和使用它們。它會保持你的系統健全並減少錯誤 [1]：https：//docs.angularjs.org/guide/databinding [2]：https：//toddmotto.com/all-about-angulars-emit-broadcast -on-publish-subscription/ [3]：https：//docs.angularjs.org/guide/scopetid –

哪種模式更適合？廣播與綁定？

回答

概述

相關問題