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

总结

原文地址:https://blog.csdn.net/qq_37012965/article/details/116993216

%s 个评论

要回复文章请先登录注册