600字范文,内容丰富有趣,生活中的好帮手!
600字范文 > angular 定义对象_angular 对象属性变化 如何对象触发对象change事件

angular 定义对象_angular 对象属性变化 如何对象触发对象change事件

时间:2024-04-28 22:15:27

相关推荐

angular 定义对象_angular 对象属性变化 如何对象触发对象change事件

Angular的核心是组件化,组件的嵌套会使得最终形成一棵组件树。Angular的变化检测可以分组件进行,每一个Component都对应有一个changeDetector,我们可以在Component中通过依赖注入来获取到changeDetector。而我们的多个Component是一个树状结构的组织,由于一个Component对应一个changeDetector,那么changeDetector之间同样是一个树状结构的组织.

另外,Angular的数据流是自顶而下,从父组件到子组件单向流动。单向数据流向保证了高效、可预测的变化检测。尽管检查了父组件之后,子组件可能会改变父组件的数据使得父组件需要再次被检查,这是不被推荐的数据处理方式。在开发模式下,Angular会进行二次检查,如果出现上述情况,二次检查就会报错:Expression Changed After It Has Been Checked Error。而在生产环境中,脏检查只会执行一次。

相比之下,AngularJS采用的是双向数据流,错综复杂的数据流使得它不得不多次检查,使得数据最终趋向稳定。理论上,数据可能永远不稳定。AngularJS给出的策略是,脏检查超过10次,就认为程序有问题,不再进行检查。

Angular有两种变化检测策略。Default是Angular默认的变化检测策略,也就是上述提到的脏检查,只要有值发生变化,就全部从父组件到所有子组件进行检查,。另一种更加高效的变化检测方式:OnPush。OnPush策略,就是只有当输入数据(即@Input)的引用发生变化或者有事件触发时,组件才进行变化检测。

现实开发中,我遇到个问题,就是angular object 对象属性值变化,并不会触发对象的change事件。

网上大致2条思路,1、OnPush 2、输入属性为Observable

但是这两种方法都不好用。

今天我来给大家讲的是另一种方法:

我们换一个思路,既然属性值变化,不会触发对象的change,那么换一个思路,每一次对象属性变化以后,我们给他生成新的对象。

父组件的对象生成,通过Object.assign方法合并生成新的对象:

this.inputVal = Object.assign({}, this.inputVal);

以我们父子组件互相通讯为例。

对应子组件@input装饰器的值子组件:

// Angular定义SimpleChanges类构造函数三个参数分别为上一个值,当前值和是否第一次变化(firstChange: boolean),这些changes都可以调用。

ngOnChanges(changes: SimpleChanges): void {

console.log('ngOnChanges中inputVal变更前值为:'+ changes['inputVal'].previousValue);

console.log('ngOnChanges中inputVal变更后值为:'+ changes['inputVal'].currentValue);

console.log('ngOnChanges中inputVal是否是一次改变:'+ changes['inputVal'].firstChange);

}

OK!一切就这么简单!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。