Angular中监听某个值变化的方法

Angular监听某个值的变化

在Angular开发中，监听数据变化并触发相应处理逻辑是常见需求。Vue中提供了便捷的watch，那么Angular如何实现类似效果？其实有多种方法，本文从两种典型场景展开。

借助getter实现监听

利用JavaScript原生的getter和setter，可以在属性值变更时自动执行自定义操作。这种方式完全不依赖Angular自有机制，适用场景广泛。

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  _inputVal;

  set inputVal(val) {
    this._inputVal = val;
    this.inputChange();
  };

  get inputVal() {
    return this._inputVal;
  }

  inputChange(val) {
    console.log(val);
  }
}

代码中定义了一个私有属性_inputVal，通过set方法拦截赋值操作，每次修改时自动调用inputChange方法。逻辑清晰，适用于单个字段的监听需求，实现简单直观。

使用Form表单进行更健壮的监听

当需要监听整个表单或多个控件的值变化时，采用Angular响应式表单更为合理。核心依赖包括FormGroup、FormBuilder和Validators。

引入必要的类

import {
 Validators,
 FormGroup,
 FormBuilder
} from '@angular/forms';

在组件中定义表单对象

validateForm: FormGroup;
constructor(private fb: FormBuilder, private ref: ChangeDetectorRef, private private) {}

注意：上面代码中的private private可能是笔误，实际开发中请根据需求正确注入服务。

创建表单并启动监听

data = {
    name: [null, [Validators.required]], // Validators.required 表示必填验证
};
ngOnInit(): void {
    this.validateForm = this.fb.group(this.data);
    // 监听整个表单的变化
    this.validateForm.valueChanges.subscribe(data => console.log('form', data));
    // 监听单个控件（比如name）的变化
    this.validateForm.get('name').valueChanges.subscribe(data => console.log('solo', data));
}

通过valueChanges这个Observable，可以订阅表单或任意控件的值变化，获取新数据后执行后续逻辑。相比getter方式，这种方法更适合表单场景，能结合验证规则一起使用，更适合处理复杂交互。

两种方式怎么选

如果只是监听单个简单属性，用getter/setter最省事；如果涉及表单多个字段、验证或复杂交互，响应式表单的valueChanges是更标准的选择。实际开发中两种方法都很常用，掌握后遇到类似需求就能快速上手。