你如何获得一个事件的 Observable？

Question

我想知道如何在 Angular 2 中获得事件的 Observable？

例如，我想订阅一个点击事件，但只在两次点击后发出？是否可以获得 MouseClick 事件对象的 Observable？

如果我想通过 button 或 ctrlKey 过滤 - 或 KeyboardEvent 的 Observable 并通过 key \ keyCode 过滤 - 或任何可能的未来场景

我已阅读http://blog.thoughtram.io/angular/2016/01/06/taking-advantage-of-observables-in-angular2.html，但valueChanges 属性是Observable<string>

我还在https://github.com/angular/angular/issues/5489 上看到，可以执行以下操作：

this.clickStream = new Subject();
...
<button (click)="clickStream.next($event)">Click Me</button>

上面的Subject方法是正确的做法吗？我不确定。

我对 Angular 2 或 RxJS 没有太多经验，但我对两者都很感兴趣，并且正在研究它们，并打算在未来的项目中使用它们

编辑

这是我的 Plunker，带有一个简单的点击用例 http://plnkr.co/edit/u1A7ve2fAYigjwaZ0x1v?p=preview

Answer 1

Observable 有一个fromEvent operator，但要使用它，您需要对本机元素的引用。获取方式是使用viewChild/contentChild获取elementRef。

接下来你可以像这样绑定到它的点击：

var clickStream = Observable.fromEvent(btnRef.nativeElement, 'click');

如果我正确理解过滤的内容，您希望流仅在单击两次后发出，或者更准确地说，每 2 次单击一次，为此，请使用 bufferWithCount operator：

var triggerFor2Clicks = clickStream.bufferWithCount(2);

这将一次发出一个包含 2 个事件的数组，因此您的操作处理程序可以是：

triggerFor2Clicks.subscribe(() => my2ClicksHandler);

请注意，参数是空的，标记为“()”，因为您并不真正关心这些事件，只是因为它们是其中的 2 个。