如何使输入可观察？

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

Answer 2

事实上，不可能直接注册与 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(...);
  }
}

Answer 3

如果你只需要观察单个输入，你可以快速做到：

在组件中：

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

在 html 中：

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

也许在 ngOnDestroy 中取消订阅。