在Angular中如何監(jiān)聽(tīng)某個(gè)值的變化
更新時(shí)間：2023年03月04日 13:42:32 投稿：jingxian
這篇文章主要介紹了在Angular中如何監(jiān)聽(tīng)某個(gè)值的變化問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
Angular監(jiān)聽(tīng)某個(gè)值的變化
使用getter
在 Angular 中可以用 getter 來(lái)監(jiān)聽(tīng)某個(gè)值的變化，類似于 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)聽(tīng)數(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)聽(tīng)數(shù)據(jù)
? data = {
? ?? ?name: [null, [Validators.required]], //Validators.required 表示驗(yàn)證（必填）
? };
? ngOnInit(): void {
?? ?this.validateForm = this.fb.group(this.data);
?? ?// 監(jiān)聽(tīng)整個(gè)表單的變化
? ? this.validateForm.valueChanges.subscribe(data => console.log('form', data));
?? ?// 單個(gè)control 變化
? ? this.validateForm.get('name').valueChanges.subscribe(data => console.log('solo', data));
? }總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了淺談angularr4生命周期鉤子，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
AngularJS中$http服務(wù)常用的應(yīng)用及參數(shù)
大家都知道，AngularJS中的$http有很多參數(shù)和調(diào)用方法，所以本文只記錄了比較常用的應(yīng)用及參數(shù)，方便大家以后使用的時(shí)候參考學(xué)習(xí)，下面一起來(lái)看看吧。2016-08-08
對(duì)比分析AngularJS中的$http.post與jQuery.post的區(qū)別
這篇文章主要給大家對(duì)比分析AngularJS中的$http.post與jQuery.post的區(qū)別，十分的詳細(xì)，是篇非常不錯(cuò)的文章，這里推薦給小伙伴們。2015-02-02
這篇文章主要為大家詳細(xì)介紹了Angular模板表單校驗(yàn)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
使用Angular 6創(chuàng)建各種動(dòng)畫(huà)效果的方法
Angular能夠讓我們創(chuàng)建出具有原生表現(xiàn)效果的動(dòng)畫(huà)。我們將通過(guò)本文學(xué)習(xí)到如何使用Angular 6來(lái)創(chuàng)建各種動(dòng)畫(huà)效果。在此，我們將使用Visual Studio Code來(lái)進(jìn)行示例演示。感興趣的朋友跟隨小編一起看看吧2018-10-10
詳解Angular-cli生成組件修改css成less或sass的實(shí)例
這篇文章主要介紹了詳解Angular-cli生成組件修改css成less或sass的實(shí)例的相關(guān)資料,這里主要講解修改angular-cli.json文件,生成css或者less,需要的朋友可以參考下2017-07-07
本文主要介紹AngularJS 一些優(yōu)化上的小技巧，這里整理了幾種方法供大家參考，有興趣的小伙伴可以參考下2016-08-08
這篇文章主要為大家介紹了angular中radio單選的問(wèn)題解決demo，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
Angular4學(xué)習(xí)筆記之新建項(xiàng)目的方法
本篇文章主要介紹了Angular4學(xué)習(xí)筆記之新建項(xiàng)目的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
給angular加上動(dòng)畫(huà)效遇到的問(wèn)題總結(jié)
本文給大家總結(jié)了一下在angular中給ng-repeat列表加上動(dòng)畫(huà)效果時(shí)所遇到的問(wèn)題及解決方法，推薦給大家，希望大家能夠喜歡。2016-02-02