javascript - 如何在 angular2 中使用 RxJS？

Question

有什么办法可以编写像 Angular 2 中那样的代码吗？

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

我尝试了很多方法将它们放入 Angular 2 组件中，但效果不佳! 我尝试过这样的事情

组件.ts

@ViewChild('delete') closeButton1: ElementRef;

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

组件.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 方法就可以了。