实现接口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" />