Angular 4 - 将事件转换为可观察的流

Question

我对 Rxjs 和 Angular 4 还很陌生，无法理解如何做到这一点。

模板:

<div class="btn-group cp">
   <input [colorPicker]="bgColor" 
   (colorPickerChange)="colorChanged()" 
   [style.background]="bgColor">
</div>

colorChanged() 在鼠标移动时由 colorPickerChnage 调用。我想在我的组件中有这样的东西:

colorChanged$.subscribe(data => console.log(data))

(它会有一些去抖和更多的订阅者，这就是为什么我想把它作为一个可观察的。)

Answer 1

我解决了。

模板:

<div class="btn-group cp">
   <input [colorPicker]="bgColor" 
   (colorPickerChange)="colorChanged(bgColor)" 
   [style.background]="bgColor">
</div>

然后在组件中:

import { Subject } from 'rxjs';

  colorChanged$ = new Subject<string>();

  colorChanged(bgColor) {
     this.colorChanged$.next(bgColor)
  }

  ngOnInit() {
     this.colorChanged$.subscribe(v => console.log(v));
  }