angular 对象属性变化,如何对象触发对象change事件

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

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

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

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

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

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

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

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

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

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

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

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

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

// 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!一切就这么简单!