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

 更新时间:2023年03月04日 13:42:32   投稿:jingxian  
这篇文章主要介绍了在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));
  }

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 浅谈angular4生命周期钩子

    浅谈angular4生命周期钩子

    本篇文章主要介绍了浅谈angularr4生命周期钩子,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • AngularJS中$http服务常用的应用及参数

    AngularJS中$http服务常用的应用及参数

    大家都知道,AngularJS中的$http有很多参数和调用方法,所以本文只记录了比较常用的应用及参数,方便大家以后使用的时候参考学习,下面一起来看看吧。
    2016-08-08
  • 对比分析AngularJS中的$http.post与jQuery.post的区别

    对比分析AngularJS中的$http.post与jQuery.post的区别

    这篇文章主要给大家对比分析AngularJS中的$http.post与jQuery.post的区别,十分的详细,是篇非常不错的文章,这里推荐给小伙伴们。
    2015-02-02
  • Angular模板表单校验方法详解

    Angular模板表单校验方法详解

    这篇文章主要为大家详细介绍了Angular模板表单校验方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • 使用Angular 6创建各种动画效果的方法

    使用Angular 6创建各种动画效果的方法

    Angular能够让我们创建出具有原生表现效果的动画。我们将通过本文学习到如何使用Angular 6来创建各种动画效果。在此,我们将使用Visual Studio Code来进行示例演示。感兴趣的朋友跟随小编一起看看吧
    2018-10-10
  • 详解Angular-cli生成组件修改css成less或sass的实例

    详解Angular-cli生成组件修改css成less或sass的实例

    这篇文章主要介绍了详解Angular-cli生成组件修改css成less或sass的实例的相关资料,这里主要讲解修改angular-cli.json文件,生成css或者less,需要的朋友可以参考下
    2017-07-07
  • AngularJS 整理一些优化的小技巧

    AngularJS 整理一些优化的小技巧

    本文主要介绍AngularJS 一些优化上的小技巧,这里整理了几种方法供大家参考,有兴趣的小伙伴可以参考下
    2016-08-08
  • angular中radio单选的问题解决demo

    angular中radio单选的问题解决demo

    这篇文章主要为大家介绍了angular中radio单选的问题解决demo,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • Angular4学习笔记之新建项目的方法

    Angular4学习笔记之新建项目的方法

    本篇文章主要介绍了Angular4学习笔记之新建项目的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • 给angular加上动画效遇到的问题总结

    给angular加上动画效遇到的问题总结

    本文给大家总结了一下在angular中给ng-repeat列表加上动画效果时所遇到的问题及解决方法,推荐给大家,希望大家能够喜欢。
    2016-02-02

最新评论