入力を観測可能にするにはどうすればよいですか？

Question

変更があったときに通知を受けたいコンポーネントがいくつかあります。私は現在、ngOnChangesを実装し、どの入力が変更されたかを把握することで作業しています。しかし、私は入力宣言を@Input('select-values') selectValues:Observable<any>に設定することをお勧めします。これにより、よりクリーンな方法で発生する新しい変更を購読することができます。

ngOnInit() { 
    this.selectValues.subscribe(() => console.log('yay!')); 
} 

この問題は、例外TypeError: this.selectValues.subscribe is not a functionが発生しています。

これも機能することがわかりました。 - Component Interaction. Intercept input property changes with a setter

Answer 1

フォームでそれらをラップし、変更

this.myForm = fb.group({ 
    'sku': ['', Validators.required] 
}); 

this.sku = this.myForm.controls['sku']; 

this.sku.valueChanges.subscribe( 
    (value: string) => { 
    console.log('sku changed to: ', value); 
    } 
); 

this.myForm.valueChanges.subscribe( 
    (value: string) => { 
    console.log('form changed to: ', value); 
    } 
); 

http://blog.ng-book.com/the-ultimate-guide-to-forms-in-angular-2/

またはhttps://github.com/angular/angular/issues/4062

Answer 2

実際にオープン

@Component({ 
    ..., 
    template: '<input (change)="onChange($event.target.value)">' 
}) 
class MyComponent { 
    this.inputChange =new Subject(); 

    onChange(e) { 
    this.inputChange.next(e); 
    } 
} 

も参照してください、この問題に耳を傾けることができ、そうではありませんオブザーバブル・アソシエートに対して直接登録することが可能dとDOM要素のイベント。 DOM要素を直接参照し、ObservableのfromEventメソッドを使用する必要があります。

が

@Component({ 
    (...) 
    template: ` 
    <input #input /> 
    ` 
}) 
export class SomeComponent { 
    @ViewChild('input') 
    input:ElementRef; 

    ngAfterViewInit() { 
    var eventObservable = Observable.fromEvent(
       this.input.nativeElement, 'keyup'); 
    } 
} 

この問題は、同様にあなたの興味ができます：

• https://github.com/angular/angular/issues/4062

たときに、入力値を通知するフォームコントロールを活用することができた。ここ

はサンプルです更新されます。コントロールの valueChanges属性は、サブコンポーネントの入力として渡すことができます。

@Component({ 
    (...) 
    template: ` 
    <input [ngFormControl]='ctrl'/> 
    <child-component [select-values]="ctrl.valueChanges"></child-component> 
    ` 
}) 
export class SomeComponent { 
    constructor() { 
    this.ctrl = new Control(); 

    this.ctrl.valueChanges.subscribe(...); 
    } 
}