如何在angular2中使用RxJS？

Question

有沒有什麼辦法在angular 2中編寫這樣的代碼？

var closeButton1 = document.querySelector('.close1'); 
var close1ClickStream = Rx.Observable.fromEvent(closeButton1, 'click'); 

我已經嘗試了很多方法，把它們放在角2組件放它不工作得很好！ 我想是這樣的

component.ts

@ViewChild('delete') closeButton1: ElementRef; 

close1ClickStream = Observable.fromEvent(closeButton1, 'click'); 

component.html

<!-- this code is inside *ngFor --> 
<li><a #delete [routerLink]="['/update', item.id]">delete</a></li> 

的問題是，我無法訪問，即使我用AfterContentInit的元素。此外，如果我可以訪問它，我可以使用Observable.fromEvent(...)嗎？

Answer 1

使用指令處理事件

@Directive({ 
    selector: '[click-handler]' 
}) 
export class ClickHandler { 

    constructor(public elementRef: ElementRef,) { 
    } 

    @HostListener('click', ['$event']) 
    onClick(e) { 
    // do staff here 
    } 
} 

使用

<button click-handler> click </button> 

無論如何，如果你想要做的使用觀測量則需要 elementRef.nativeElement這是可以在這裏找到，只是實現OnInit方法，你是它很好去。

Answer 2

是的，你可以做到這一點：

import { Observable } from 'rxjs/Observable'; 
//... 

@ViewChild('delete') closeButton1: ElementRef; 

close1ClickStream = Observable.fromEvent(closeButton1, 'click');