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是更标准的选择。实际开发中两种方法都很常用，掌握后遇到类似需求就能快速上手。
