gpt4 book ai didi

angularjs - 两种方式的数据绑定(bind)不会触发组件中的 $onChanges

转载 作者:行者123 更新时间:2023-12-04 01:45:42 25 4
gpt4 key购买 nike

两种方式的数据绑定(bind)不会在组件之间更新
我正在使用两种方式数据绑定(bind)设置组件间通信。我有一个父 Controller ,它从 AJAX 调用中获取数据并将该数据发送到 2 个组件。
我试图修改传递给组件的数据,但是如果 child1 组件更新了数据,尽管存在双向数据绑定(bind),但子组件不会获取更新数据。我读到 $onChanges 钩子(Hook)不会捕获双向数据绑定(bind)的更改事件。

<div ng-controller="ParentController as ctrl">
<child1 data="ctrl.data"></child1>
<child2 data="ctrl.data"></child>
</div>
父 Controller :
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 life-cycle hook仅在更改单向 ( "<" ) 和属性 ( "@" ) 绑定(bind)时触发。它不会在双向 ("=") 绑定(bind)的更改时触发。

对于组件,对输入使用单向 ("<") 绑定(bind),对输出使用表达式 ("&") 绑定(bind):

app.component('child1',{
bindings: {
̶d̶a̶t̶a̶ ̶:̶ ̶'̶=̶'̶
facts: "<",
factsChange: "&",
},
controller: function(){
this.$onChanges = function(changes){
if(changes.facts)
console.log('facts changed');
}
}
});

避免使用双向 ( "=") 绑定(bind)。它们使迁移到 Angular 2+ 变得更加困难。

如需更多信息,请参阅 AngularJS Developer Guide - Component-Based Application Architecture .

还要小心以 data 开头的绑定(bind)。 .指令规范化将去除以 data- 开头的名称.见 AngularJS Developer Guide - Directive Normalization .

执行 XHR 的函数不能返回数据。他们只能返回需要从中提取数据的 promise 。
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 的看法。

关于angularjs - 两种方式的数据绑定(bind)不会触发组件中的 $onChanges,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55357585/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com