更新變量前的角度組件觸發方法調用

我目前正在使用組件重構角度爲1.5.8的應用程序中的一些代碼。更新變量前的角度組件觸發方法調用

（非常類似於本指南中的某些步驟：https://teropa.info/blog/2015/10/18/refactoring-angular-apps-to-components.html）基本案例工作正常。

但我得到一個問題，當我需要讓我的組件都更新變量，並且還調用一個函數（都綁定從父）。在這種情況下，函數調用似乎在變量被綁定之前發生。所以當方法對父對象執行時，它仍然使用變量的舊內容。

如何確保變量在方法執行前已更新？

請參閱下面的代碼中的註釋，它是reset（）函數的兩行。

angular.module('searchfieldComponent', []) 

.component('searchfieldComponent', { 
    templateUrl: "/js/common/components/searchfield.component.tpl.html", 
    bindings: { 
     labelText: '@', 
     searchText: '=', 
     searchCallback: '&' 
    }, 
    controllerAs: "vm", 
    controller: [function() { 

     var vm = this; 

     vm.search = function() { 
      vm.searchCallback(); 
     } 

     vm.reset = function() { 
      vm.searchText = null; 
      // When the method bound to searchCallback executes in the parent, 
      // the variable bound to searchText has not yet been set to null 
      // it is still the old value. 
      vm.searchCallback(); 
     } 
    }] 
});

來源

2017-02-15 PMBjornerud

當您使用對象在組件之間傳遞數據，然後修改其屬性時會發生什麼？像'searchData：'=「; /*...*/ vm。searchData.text = null' – raina77ow

這是有效的。謝謝！我想這是因爲它整個時間都是同一個對象，所以我通過這種方式避免了時間問題。隨意發佈它作爲答案，但我認爲包裝對象是一種解決方法，而不是最佳解決方案。如果沒有更好的答案出現，我會在幾天內接受它。 – PMBjornerud

這個問題的關鍵是想着這行...

vm.searchText = null;

...沒有。當然，它會更新'孩子'範圍中設置的值。但是，當「父」價值更新時呢？

通過標準原型繼承機制直接「連接」父級和子級範圍變量是不可能的。當您查詢child.foo屬性時，名稱解析會將其值與child.__proto__.foo之一替換。但只要你分配東西到child.foo，原型的屬性將被遮蔽。

AngularJS可讓您通過商標摘要方式走出這座監獄。它處於摘要階段，對子範圍的更改傳播到父範圍（有關更多詳細信息，請檢查this answer）。但是如果你想立即做出這樣的事情，那就麻煩了。

有什麼補救措施？我會建議在意見上的人是最知名的，並試圖之一：使用共享的對象，而不是原始的，是這樣的...

bindings: { 
    labelText: '@', 
    searchData: '=', 
    searchCallback: '&' 
} 

// then, in vm methods 
vm.searchData.searchText = 'anything';

...所以你永遠不會改變存儲在vm.searchData參考 - 你反而增加它的屬性。而且，由於這兩個組件都'看'在同一個地方，顯然他們都看到了變化。

儘管如此，更好的想法可能是重新考慮searchfieldComponent的結構。我不清楚爲什麼這裏的父範圍應該知道searchText的值。看到，Angular組件的整個意義在於將一些鬆散定義的指令轉化爲具有嚴格輸入和輸出集合的實體。

對於通用的searchField，向其提供一些預定義的defaultValue（以便輸入，標有'>'符號）可能是個好主意。但是當你需要改變某些東西時，讓組件通過輸出函數（類似於searchCallback，但名稱更好）發出changedValue - 並將此值作爲參數傳遞給此函數。

來源

2017-02-15 11:05:30 raina77ow

也許我的組件太小？如果我可以通過其他方法避免重複代碼，則不需要使用組件。在此，只有父級知道searchText的上下文。對於組件來說，它只是一個沒有上下文的字符串。該組件提供了一小部分通用代碼（佈局，輸入鍵檢測和清除文本的按鈕）。 – PMBjornerud

好吧，但它爲什麼重要？您仍需要輸入和輸出才能使該組件正確解耦 - 成爲組件，而不僅僅是緊密耦合到父組件的擴展。 – raina77ow

更新變量前的角度組件觸發方法調用

回答

相關問題