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

Question

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

模板：

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

colorChanged() 在 mousemove 上被 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));
  }