如何在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');