angular2监听变量

最新推荐文章于 2024-02-28 15:53:26 发布

原创最新推荐文章于 2024-02-28 15:53:26 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

问题记录专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了如何在Angular中实现页面元素的数据更新检测，通过实现Docheck接口并利用KeyValueDiffers服务来跟踪和响应对象变化。同时，展示了如何在组件中使用FormControl进行表单控制，包括监听值的变化并执行相应操作。

实现接口Docheck，检测页面上所有元素数据更新

import { Component, DoCheck } from "@angular/core";
export class LangListUserComponent implements DoCheck {

constructor(private differs: KeyValueDiffers) {
}
 
ngOnInit() {
 this.objDiffer = {};
 this.list.forEach((elt) => {
  this.objDiffer[elt] = this.differs.find(elt).create(null);
 });
}
 
ngDoCheck() {
 this.list.forEach(elt => {
  var objDiffer = this.objDiffer[elt];
  var objChanges = objDiffer.diff(elt);
  if (objChanges) {
   objChanges.forEachChangedItem((elt) => {
    if (elt.key === 'prop1') {
     this.doSomethingIfProp1Change();
    }
   });
  }
 });
}

formControl

module注入
import { FormsModule, ReactiveFormsModule } from ‘@angular/forms’;

组件中注入
import { FormControl } from ‘@angular/forms’;

可以订阅多次，相当于监听了多次：

import { Component, OnInit } from '@angular/core';
import { of } from "rxjs";
import { FormControl } from '@angular/forms';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
    constructor() { }

    public col = new FormControl();
    public value: number = 22;
   
    ngOnInit() {
        this.col.valueChanges.subscribe(data => {
            console.log(data)
        });
        this.col.valueChanges.subscribe(data => {
            console.log(Math.random())
        });
    }
}

html

<input type="text" [formControl]="col" [(ngModel)]="value" />