[英]Observable of Component Attribute Changes in Angular2
When creating a component in angular 2 that has inputs attributes via @Input, how can I get an observable from the changes made to that attribute @Input (not to be confused with user form input). 当在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()
}
}
In practice, I would like to merge the Observable changes of the userObject with the Observable changes of other things to have a fluent change reaction pattern. 在实践中,我想将userObject的Observable更改与其他事物的Observable更改合并,以形成流畅的更改反应模式。
export class ExampleComponent implement OnChanges{
@Input() userObject: User;
constructor():{
userObject.valueChanges.subscribe(x=>{ this.doStuff() });
}
}
I found out the that BehaviorSubject class enables this scenario the best. 我发现BehaviorSubject类可以最好地实现此方案。 Instead of creating a separate backend field, you can use the BehaviorSubject's
getValue
function to peak at the current value. 您可以使用BehaviorSubject的
getValue
函数在当前值达到峰值,而不是创建单独的后端字段。 Then use the backing BehaviorSubject to view as an observable for changes. 然后,使用后盾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(); }
}
Try usings a get and a set, valueChanges() below will fire on being set. 尝试使用get和set,下面的valueChanges()将在设置时触发。
private _userObject: User;
@Input()
set userObject(userObject: User) {
this._userObject = userObject;
this.valueChanges();
}
get userObject(): User {
return this._userObject;
}
With an Observable: 具有可观察的:
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;
}
To subscribe: 认购:
this.newQuote.subscribe(user => {...})
You can use subject for this: 您可以为此使用主题:
export class ExampleComponent {
@Input() set userObject(userObject: User) {
this.userObject$.next(userObject);
}
private userObject$ = new Subject<User>();
constructor():{
this.userObject$.subscribe(x=>{ this.doStuff() });
}
}
The best way to check the change of an input is actually by using the ngOnChanges
life cycle. 检查输入更改的最佳方法实际上是使用
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
}
}
Reference: https://github.com/angular/material2/blob/master/src/lib/icon/icon.ts#L143 参考: https : //github.com/angular/material2/blob/master/src/lib/icon/icon.ts#L143
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.