2017-07-18 84 views
1

使用AngularJS組件什麼是向組件發送信號的最佳方式?要更新的信號角度組件

說我有myComponent,我想告訴它更新其數據,我會如何實現這一目標?如果可能,我寧願不使用$emit$broadcast,而是選擇儘可能類似於Angular2的東西。

目前,我傳入一個控件對象與組件實現的回調,但我不喜歡這種方法。

我的另一個概念是通過單向綁定機制發出信號,但感覺非常黑客。

<my-component update="$ctrl.shouldUpdate"></my-component> 

我控制器接着會做

function update(){ 
    this.shouldUpdate = Math.rand(); 
} 

是否還有更好的,更現代的角度的方式來做到這一點?

澄清

有人要求澄清:

想象一下,你有兩個組成部分

  • peopleList
  • personEditor

因爲他們是如何的AR在使用時,他們都從服務器獲得「人員」列表,因此沒有共享的(綁定的)常用的人員列表。

想象一下,personEditor會更改人員姓名並將其保存到服務器。

一個如何去告訴它需要更新

+0

請提供更多關於這應該如何工作的信息。 MCVE會很棒。它可以是&綁定的(它與A2/4事件一致)或RxJS。 – estus

+0

是人編輯personList的小孩嗎? –

+0

@MikeFeltman現在是的,但'peopleList'被用在很多地方,所以我並不真的想要一個緊密耦合的解決方案,即使用'require'給父母或者其他地方,因爲我不想影響它在其他地方的使用。 – Chris

回答

1

在人編輯器組件我想補充一個可選參考,使用綁定父列表中的peopleList組件。例如:

bindings: { parentList: '<?' } 

然後,當您在人員編輯器組件中更新時,檢查是否存在parentList並進行相應更新。您可以設置它,以便在父級指定方法來調用並傳遞更新的數據。

+1

這實際上是一個很好的簡單的想法,我想我是解僱這個顯而易見的,去了一個更復雜的解決方案! – Chris

+0

@Petr你的評論是在我相信的刪除答案。由於答案已發佈,所以OP澄清了他的問題,我繼續並刪除了它。我可以建議你刪除你的評論,以避免混淆? –

0

這聽起來像是負責從服務器獲取人員列表的服務的完美時間。你的作品都會使用相同的服務來獲取信息。然後,如果有人更新某個內容,則其他人(使用相同的數據源)會自動查看更新。例如:

angular 
    .module('app') 
    .service("peopleService", peopleService); 

peopleService.$inject = ["$http"]; 
function peopleService($http) { 
    var svc = this; 

    svc.people = []; 

    svc.getPeople = getPeople; 
    svc.updatePerson = updatePerson; 

    return svc; 

    function getPeople() { 
     //$http call to get people 
    } 

    function updatePerson(person) { 
     //some call to the server 

     //update the javascript objects 
    } 
} 

然後,兩個您peopleEditorpeopleList可以引用相同的數據源。只需將peopleService包含到控制器中並將其用作數據源即可。例如:

angular 
    .module('app') 
    .controller('mainController', mainController); 

mainController.$inject = ['peopleService']; 
function mainController(peopleService) { 
    var vm = this; 

    vm.people = peopleService.people; 

    return vm; 
}