在Angular中如何监听某个值的变化

这篇文章主要介绍了在Angular中如何监听某个值的变化问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

Angular监听某个值的变化

使用getter

在 Angular 中可以用 getter 来监听某个值的变化，类似于 Vue 中的 watch

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); } }

angular使用form表单监听数据

主要使用方法类 FormGroup，FormBuilder，Validators

引入主要使用方法类 FormGroup，FormBuilder，Validators

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

赋值引入

    validateForm: FormGroup;     constructor(private fb: FormBuilder,private ref: ChangeDetectorRef,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));     // 单个control 变化     this.validateForm.get('name').valueChanges.subscribe(data => console.log('solo', data));   }