如何在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>

无论如何，如果您想使用Observables进行操作，则需要在此处可用的elementRef.nativeElement ，只需实现OnInit方法即可。

Answer 2

是的，您可以做到：

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

@ViewChild('delete') closeButton1: ElementRef;

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