[英]Observable of Component Attribute Changes in Angular2
当在angular 2中创建一个通过@Input具有输入属性的组件时,如何从对该属性@Input所做的更改中获得一个可观察到的信息(不要与用户表单输入相混淆)。
export class ExampleComponent implement OnChanges{
@Input() userObject: User;
ngOnChanges(changes: any): void{
// Validate that its the 'userObject' property first
this.doStuff()
}
}
在实践中,我想将userObject的Observable更改与其他事物的Observable更改合并,以形成流畅的更改反应模式。
export class ExampleComponent implement OnChanges{
@Input() userObject: User;
constructor():{
userObject.valueChanges.subscribe(x=>{ this.doStuff() });
}
}
我发现BehaviorSubject类可以最好地实现此方案。 您可以使用BehaviorSubject的getValue
函数在当前值达到峰值,而不是创建单独的后端字段。 然后,使用后盾BehaviorSubject将其视为可观察到的更改。
export class ExampleComponent{
private _userObject: BehaviorSubject<User> = new BehaviorSubject<User>(null);
@Input()
set userObject(value: User): { this._userObject.next(value); }
get userObject(): User { return this._userObject.getValue(); }
}
尝试使用get和set,下面的valueChanges()将在设置时触发。
private _userObject: User;
@Input()
set userObject(userObject: User) {
this._userObject = userObject;
this.valueChanges();
}
get userObject(): User {
return this._userObject;
}
具有可观察的:
private userObjectChange = new Subject<User>();
userObjectChange$ = this.userObjectChange.asObservable();
private _userObject: User;
@Input()
set userObject(userObject: User) {
this.userObjectChange.next(userObject);
this._userObject = userObject;
}
get userObject(): User {
return this._userObject;
}
认购:
this.newQuote.subscribe(user => {...})
您可以为此使用主题:
export class ExampleComponent {
@Input() set userObject(userObject: User) {
this.userObject$.next(userObject);
}
private userObject$ = new Subject<User>();
constructor():{
this.userObject$.subscribe(x=>{ this.doStuff() });
}
}
检查输入更改的最佳方法实际上是使用ngOnChanges
生命周期。
ngOnChanges(changes: { [propertyName: string]: SimpleChange }) {
const changedInputs = Object.keys(changes);
// Only update the userObject if the inputs changed, to avoid unnecessary DOM operations.
if (changedInputs.indexOf('userObject') != -1) {
// do something
}
}
参考: https : //github.com/angular/material2/blob/master/src/lib/icon/icon.ts#L143
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.