Angular中如何监听TypeScript类属性的值变化？

从AngularJS的$watch、$digest转到Angular 5+之后，确实不能再直接用这些方法了，变更检测和属性监听已经整合到组件生命周期钩子和一些新特性里。我结合官方文档和实践经验，整理了几种常用的方案：

1. 用OnChanges钩子监听输入属性变化 #

这个钩子专门用来监听被@Input()装饰的组件输入属性的变化，当父组件传递给子组件的输入值改变时，会自动触发ngOnChanges方法。它能拿到变化前后的值对比，非常适合父子组件间的属性传递监听。

示例代码：

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({
  selector: 'app-child',
  template: '<p>{{userName}}</p>'
})
export class ChildComponent implements OnChanges {
  @Input() userName: string;

  ngOnChanges(changes: SimpleChanges): void {
    // 检查userName属性是否发生变化
    if (changes.userName) {
      console.log('旧值:', changes.userName.previousValue);
      console.log('新值:', changes.userName.currentValue);
      // 这里可以添加你的业务逻辑
    }
  }
}

注意：OnChanges只能检测到输入属性的引用变化，如果输入的是对象/数组，只修改内部属性（比如user.age = 25）不会触发这个钩子，因为引用没改变。

2. 用DoCheck钩子自定义变更检测 #

如果需要监听非输入属性，或者可变对象/数组的内部变化，DoCheck是个选择。它会在每个变更检测周期都运行，所以你可以在里面手动对比属性的变化。不过要注意，这个钩子触发频率很高，一定要做好性能优化，避免不必要的计算。

示例代码：

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

@Component({
  selector: 'app-my-component',
  template: '<p>{{user.age}}</p>'
})
export class MyComponent implements DoCheck {
  user = { name: 'Tom', age: 20 };
  private previousAge: number;

  ngDoCheck(): void {
    // 对比当前age和之前保存的age
    if (this.user.age !== this.previousAge) {
      console.log('age发生了变化:', this.previousAge, '→', this.user.age);
      this.previousAge = this.user.age;
    }
  }
}

3. 用Setter监听单个属性 #

如果只是监听某个特定属性（不管是不是输入属性），用Setter是最简洁的方式。你可以给属性定义getter和setter，当属性值被修改时，setter会自动执行。

示例代码（输入属性版）：

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

@Component({
  selector: 'app-child',
  template: '<p>{{_userName}}</p>'
})
export class ChildComponent {
  private _userName: string;

  @Input()
  set userName(value: string) {
    console.log('userName变化了:', this._userName, '→', value);
    this._userName = value;
    // 这里可以添加你的业务逻辑
  }

  get userName(): string {
    return this._userName;
  }
}

示例代码（内部属性版）：

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

@Component({
  selector: 'app-my-component',
  template: '<button (click)="changeCount()">点击</button><p>{{count}}</p>'
})
export class MyComponent {
  private _count = 0;

  set count(value: number) {
    console.log('count变化了:', this._count, '→', value);
    this._count = value;
  }

  get count(): number {
    return this._count;
  }

  changeCount(): void {
    this.count++;
  }
}

4. 用RxJS的BehaviorSubject实现响应式监听 #

如果你的项目用了响应式编程，或者需要在多个地方监听同一个属性的变化，RxJS的BehaviorSubject是个很好的选择。它可以把属性变成可观察对象，订阅它就能收到每次变化的通知。

示例代码：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { BehaviorSubject, Subscription } from 'rxjs';

@Component({
  selector: 'app-my-component',
  template: '<p>{{currentData}}</p>'
})
export class MyComponent implements OnInit, OnDestroy {
  private _dataSubject = new BehaviorSubject<string>('初始值');
  // 对外暴露可观察对象，避免外部直接修改subject
  data$ = this._dataSubject.asObservable();
  currentData: string;
  private subscription: Subscription;

  ngOnInit(): void {
    // 订阅数据变化
    this.subscription = this.data$.subscribe((value) => {
      this.currentData = value;
      console.log('数据变化了:', value);
    });
  }

  // 修改数据的方法
  updateData(newValue: string): void {
    this._dataSubject.next(newValue);
  }

  ngOnDestroy(): void {
    // 组件销毁时取消订阅，避免内存泄漏
    this.subscription.unsubscribe();
  }
}

以上几种方案可以根据你的具体场景选择：

• 父子组件输入属性变化 → 优先用OnChanges
• 单个属性简单监听 → 用Setter
• 复杂的自定义变更检测 → 用DoCheck（注意性能）
• 响应式架构或多地方监听 → 用RxJS的BehaviorSubject

内容的提问来源于stack exchange，提问作者L Y E S - C H I O U K H