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);
  }
}

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

Answer 2

事实上，不可能直接注册与DOM元素事件相关的可观察对象。您需要直接引用DOM元素，然后使用fromEvent的{{1}}方法。

以下是一个示例：

Observable

这个问题也会引起你的兴趣：

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

这就是说，当输入值更新时，您可以利用表单控件进行通知。控件的@Component({ (...) template: ` <input #input /> ` }) export class SomeComponent { @ViewChild('input') input:ElementRef; ngAfterViewInit() { var eventObservable = Observable.fromEvent( this.input.nativeElement, 'keyup'); } }属性可以作为子组件的输入传递。

valueChanges

Answer 3

如果您只需要观察单个输入，则可以快速执行：

组件中的

：

ngOnInit() {
  this.searchField = new FormControl();
  this.searchField.valueChanges.subscribe(term => {
    console.log('searching for', term);
  });
}

in html：

<input type="search" [formControl]="searchField">

并且可能取消订阅ngOnDestroy。

如何使输入可观察？

3 个答案: