Angular2のコンポーネント属性の変化を観察

Question

@Inputを使用して入力属性を持つ角度2のコンポーネントを作成すると、その属性@Input（ユーザーフォーム入力と混同しないでください）に対する変更から観測値を取得するにはどうすればよいですか？ 。

export class ExampleComponent implement OnChanges{ 
    @Input() userObject: User; 

    ngOnChanges(changes: any): void{ 
     // Validate that its the 'userObject' property first 
     this.doStuff() 
    } 
} 

は実際には、私は流暢な変更の反応パターンを持っている他のものの観察可能変更でユーザーオブジェクトの観察可能変更をマージしたいと思います。

export class ExampleComponent implement OnChanges{ 
    @Input() userObject: User; 

    constructor():{ 
     userObject.valueChanges.subscribe(x=>{ this.doStuff() }); 
    } 
} 

Answer 1

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 => {...}) 

Answer 2

あなたはこのために主題を使用することができますの変更をチェックする

export class ExampleComponent { 
    @Input() set userObject(userObject: User) { 
     this.userObject$.next(userObject); 
    } 

    private userObject$ = new Subject<User>(); 

    constructor():{ 
     this.userObject$.subscribe(x=>{ this.doStuff() }); 
    } 
} 

Answer 3

最良の方法入力は実際には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

Answer 4

私はその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(); } 
}