angular - 如何使输入可观察？

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/

或

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

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

另请参阅此问题打开 https://github.com/angular/angular/issues/4062