经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » AngularJS » 查看文章
在Angular中如何监听某个值的变化
来源:jb51  时间:2023/3/6 9:13:07  对本文有异议

Angular监听某个值的变化

使用getter

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

  1. import { Component } from '@angular/core';
  2. @Component({
  3. selector: 'app-root',
  4. templateUrl: './app.component.html',
  5. styleUrls: ['./app.component.css']
  6. })
  7. export class AppComponent {
  8.  
  9. _inputVal;
  10.  
  11. set inputVal(val) {
  12. this._inputVal = val;
  13. this.inputChange();
  14. };
  15.  
  16. get inputVal() {
  17. return this._inputVal;
  18. }
  19.  
  20. inputChange(val) {
  21. console.log(val);
  22. }
  23. }

angular使用form表单监听数据

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

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

  1. import {
  2. ?Validators,
  3. ?FormGroup,
  4. ?FormBuilder
  5. } from '@angular/forms';
  6.  

赋值引入

  1. ?? ?validateForm: FormGroup;
  2. ?? ?constructor(private fb: FormBuilder,private ref: ChangeDetectorRef,private private) {}

创建表单+监听数据

  1. ? data = {
  2. ? ?? ?name: [null, [Validators.required]], //Validators.required 表示验证(必填)
  3. ? };
  4. ? ngOnInit(): void {
  5. ?? ?this.validateForm = this.fb.group(this.data);
  6. ?? ?// 监听整个表单的变化
  7. ? ? this.validateForm.valueChanges.subscribe(data => console.log('form', data));
  8. ?? ?// 单个control 变化
  9. ? ? this.validateForm.get('name').valueChanges.subscribe(data => console.log('solo', data));
  10. ? }

总结

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

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号