当前位置： 正文

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

前端技术 2020-03-02

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

赏