[英]Two way data bindings does not trigger $onChanges in Components
我正在使用两种方式的数据绑定设置组件间通信。 我有一个父控制器,该控制器从AJAX调用中获取数据并将该数据发送到2个组件。
我试图修改传递给组件的数据,但是如果child1组件更新了数据,尽管存在两种方式的数据绑定,子组件也无法获取更新数据。 我读到$ onChanges钩子不会捕获双向数据绑定的change事件。
<div ng-controller="ParentController as ctrl">
<child1 data="ctrl.data"></child1>
<child2 data="ctrl.data"></child>
</div>
上级主管:
var app = angular.module('app',[]);
app.controller('ParentController', function($scope, $get){
//get data from AJAX call
this.data = getDataFromAjaxCall();
}
Child1组件:
app.component('child1',{
bindings : {
data : '='
},
controller: function($scope){
var self = this;
self.$onChanges = function(changes){
if(changes.data)
console.log('data changed');
}
self.addData = function(){
self.data.push({
id : 10,
name : 'abc'
});
}
}
});
Child2组件:
app.component('child2',{
bindings : {
data : '='
},
controller: function($scope){
var self = this;
self.$onChanges = function(changes){
if(changes.data)
console.log('data changed');
}
self.addData = function(){
self.data.push({
id : 20,
name : 'pqr'
});
}
}
});
如果child2组件修改了数据,我希望在child1组件中获取更新的数据,反之亦然。
$onChanges
生命周期挂钩仅在单向( "<"
)和属性( "@"
)绑定更改时触发。 它不会触发双向( "="
)绑定的更改。
对于组件,对输入使用单向( "<"
)绑定,对输出使用表达式( "&"
)绑定:
app.component('child1',{
bindings: {
̶d̶a̶t̶a̶ ̶:̶ ̶'̶=̶'̶
facts: "<",
factsChange: "&",
},
controller: function(){
this.$onChanges = function(changes){
if(changes.facts)
console.log('facts changed');
}
}
});
避免使用双向( "="
)绑定。 它们使向Angular 2+的迁移更加困难。
有关更多信息,请参阅《 AngularJS开发人员指南-基于组件的应用程序体系结构》 。
也要注意以data
开头的绑定。 指令规范化将删除以data-
开头的名称。 请参阅《 AngularJS开发人员指南-指令规范化》 。
执行XHR的函数无法返回数据。 他们只能返回需要从中提取数据的承诺。
var app = angular.module('app',[]);
app.controller('ParentController', function($scope, $get){
//get data from AJAX call
̶t̶h̶i̶s̶.̶d̶a̶t̶a̶ ̶=̶ ̶g̶e̶t̶D̶a̶t̶a̶F̶r̶o̶m̶A̶j̶a̶x̶C̶a̶l̶l̶(̶)̶;̶
var promise = getDataFromAjaxCall();
promise.then( response => {
this.data = response.data;
});
}
JavaScript浏览器为IO使用单线程非阻塞事件驱动架构。 熟悉命令式编程风格的程序员需要更改使用JavaScript浏览器对IO的思考方式。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.