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