Angular中如何监听非@Input的普通变量变更并触发函数？

实现方案 #

Angular 中监听普通自有变量的变化有以下三种常用实现方式，可根据业务场景选择：

方案1：Getter/Setter 封装（最轻量，无额外依赖） #

直接通过ES原生的get/set语法封装变量，赋值时自动触发setter内的逻辑，适合仅当前组件内修改变量的简单场景。
代码示例：

// 私有存储变量，不对外暴露
private _isFormCompleted: boolean = false;

// 对外暴露的读取入口
get isFormCompleted(): boolean {
  return this._isFormCompleted;
}

// 赋值入口，内置变更触发逻辑
set isFormCompleted(value: boolean) {
  this._isFormCompleted = value;
  if (value === true) {
    this.yourTargetFunction(); // 变量变为true时触发目标函数
  }
}

ngOnInit() {
  this.checkComplete();
}

checkComplete() {
  /**
  * Checks if all conditions are valid and then turns the flag variable to true
  **/
  this.isFormCompleted = true; // 赋值时自动触发setter逻辑
}

// 你需要触发的目标函数
yourTargetFunction() {
  // 你的业务逻辑
}

方案2：RxJS BehaviorSubject 实现（适合多订阅/跨组件场景） #

如果需要多个地方响应变量变化、或者跨组件共享该状态，可使用RxJS的可观察对象实现。
代码示例：

import { BehaviorSubject, takeUntil } from 'rxjs';
import { DestroyRef } from '@angular/core';

// 私有Subject，用于控制值的更新
private readonly isFormCompletedSub$ = new BehaviorSubject<boolean>(false);
// 对外暴露只读可观察对象，避免外部随意修改值
public readonly isFormCompleted$ = this.isFormCompletedSub$.asObservable();

constructor(private destroyRef: DestroyRef) {
  // 订阅变量变化
  this.isFormCompleted$.pipe(
    takeUntil(this.destroyRef) // Angular 16+ 自动销毁订阅，避免内存泄漏
  ).subscribe(value => {
    if (value) {
      this.yourTargetFunction();
    }
  })
}

ngOnInit() {
  this.checkComplete();
}

checkComplete() {
  this.isFormCompletedSub$.next(true); // 更新变量值
}

yourTargetFunction() {
  // 业务逻辑
}

方案3：Angular 16+ Signal 实现（官方推荐响应式方案） #

如果你的项目使用Angular 16及以上版本，可使用官方提供的响应式原语Signal，性能更优，不需要手动处理订阅销毁。
代码示例：

import { signal, effect } from '@angular/core';

// 定义响应式变量，初始值为false
public isFormCompleted = signal(false);

constructor() {
  // 注册副作用：当signal依赖的值发生变化时自动执行
  effect(() => {
    if (this.isFormCompleted()) {
      this.yourTargetFunction();
    }
  })
}

ngOnInit() {
  this.checkComplete();
}

checkComplete() {
  this.isFormCompleted.set(true); // 更新signal值
}

yourTargetFunction() {
  // 业务逻辑
}

方案选择建议 #

• 仅当前组件使用、逻辑简单：优先选择Getter/Setter方案，实现成本最低，无额外运行时开销
• 需要跨组件共享状态、有多个订阅方：选择RxJS方案
• 项目Angular版本 >=16：优先选择Signal方案，框架原生支持响应式，性能更优

内容的提问来源于stack exchange，提问作者MelbDev