在Angular中如何監(jiān)聽某個值的變化
更新時間:2023年03月04日 13:42:32 投稿:jingxian
這篇文章主要介紹了在Angular中如何監(jiān)聽某個值的變化問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
Angular監(jiān)聽某個值的變化
使用getter
在 Angular
中可以用 getter
來監(jiān)聽某個值的變化,類似于 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表單監(jiān)聽數(shù)據(jù)
主要使用方法類 FormGroup,F(xiàn)ormBuilder,Validators
引入主要使用方法類 FormGroup,F(xiàn)ormBuilder,Validators
import { ?Validators, ?FormGroup, ?FormBuilder } from '@angular/forms';
賦值引入
?? ?validateForm: FormGroup; ?? ?constructor(private fb: FormBuilder,private ref: ChangeDetectorRef,private private) {}
創(chuàng)建表單+監(jiān)聽數(shù)據(jù)
? data = { ? ?? ?name: [null, [Validators.required]], //Validators.required 表示驗證(必填) ? }; ? ngOnInit(): void { ?? ?this.validateForm = this.fb.group(this.data); ?? ?// 監(jiān)聽整個表單的變化 ? ? this.validateForm.valueChanges.subscribe(data => console.log('form', data)); ?? ?// 單個control 變化 ? ? this.validateForm.get('name').valueChanges.subscribe(data => console.log('solo', data)); ? }
總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
AngularJS中$http服務(wù)常用的應(yīng)用及參數(shù)
大家都知道,AngularJS中的$http有很多參數(shù)和調(diào)用方法,所以本文只記錄了比較常用的應(yīng)用及參數(shù),方便大家以后使用的時候參考學習,下面一起來看看吧。2016-08-08對比分析AngularJS中的$http.post與jQuery.post的區(qū)別
這篇文章主要給大家對比分析AngularJS中的$http.post與jQuery.post的區(qū)別,十分的詳細,是篇非常不錯的文章,這里推薦給小伙伴們。2015-02-02使用Angular 6創(chuàng)建各種動畫效果的方法
Angular能夠讓我們創(chuàng)建出具有原生表現(xiàn)效果的動畫。我們將通過本文學習到如何使用Angular 6來創(chuàng)建各種動畫效果。在此,我們將使用Visual Studio Code來進行示例演示。感興趣的朋友跟隨小編一起看看吧2018-10-10詳解Angular-cli生成組件修改css成less或sass的實例
這篇文章主要介紹了詳解Angular-cli生成組件修改css成less或sass的實例的相關(guān)資料,這里主要講解修改angular-cli.json文件,生成css或者less,需要的朋友可以參考下2017-07-07