使用 KeyValueDiffers 检测Angular 对象的变化

为了检查组件中的变化，可以利用 Angular 提供的 ngDoCheck() 生命周期钩子函数。这个函数在每个变化检测期间都会被调用。

Angular 组件中的变化检测是基于观察者模式实现的，原理是通过持续监测变量的值是否发生改变来实现的。ngDoCheck() 告诉 Angular 在执行变化检测时，需要跟踪所有可能导致视图或数据不同步的位置，然后更新它们。

如果你想要检查 TypeScript 中的对象的变化，你可以使用 ngDoCheck() 钩子来手动实现变化检测。以下是一个简单的例子：

import { Component, DoCheck } from '@angular/core';

@Component({
  selector: 'my-component',
  template: '{{ myObject.name }}'
})
export class MyComponent implements DoCheck {
  myObject = { name: 'John', age: 30 };

  ngDoCheck() {
    const changes = JSON.stringify(this.myObject);
    console.log(changes);
  }
}

在上面的例子中，我们定义了一个名为 myObject 的对象。在 ngDoCheck() 生命钩子中，我们将其转换为字符串并打印出来。如果 myObject 在某个时刻被修改了，ngDoCheck() 就会被调用，我们就能看到修改后的值。

另外一个更方便的方法是使用 Angular 自带的 KeyValueDiffers 工具类。它提供了一个键值对的变化检测器，可以检测到对象属性的变化，并返回一个列表，其中包含每个属性的更改信息。

下面是一个使用 KeyValueDiffers 的例子：

import { Component, KeyValueDiffers, OnInit } from '@angular/core';

@Component({
  selector: 'my-component',
  template: `
    Name: {{ myObject.name }}<br>
    Age: {{ myObject.age }}
  `
})
export class MyComponent implements OnInit {
  myObject = { name: 'John', age: 30 };
  differ: any;

  constructor(private differs: KeyValueDiffers) { }

  ngOnInit() {
    this.differ = this.differs.find(this.myObject).create();
  }

  ngDoCheck() {
    const changes = this.differ.diff(this.myObject);
    if (changes) {
      console.log('Changes detected!');
    }
  }
}

首先，在构造函数中注入了 KeyValueDiffers 服务，然后在 ngOnInit() 生命周期钩子中创建了一个新的 Diff 对象。在 ngDoCheck() 方法中，我们检查 myObject 对象是否有变化。如果有，就记录变化。