如何使用 RxJS 在 Angular2 中观察 DOM 事件？

Question

我使用 Angular2 Alpha 46。我有一个列表视图组件，如下所示。我想观察来自 PREV 和 NEXT 按钮的点击事件，并通过承诺调用 Web API 来检索数据并更新列表。

不知道是应该直接使用Angular2还是RxJS自带的EventEmitter。

谁能举个例子？

Answer 1

我没有完整的示例，但我可以为您勾勒出一个解决方案：

在你的模板中绑定点击事件

<button (click)="next()">Next</button>
<button (click)="prev()">Prev</button>

在你的 class 中（我猜你使用的是 Typescript）定义 next() 和 prev()

import {Http, Headers, HTTP_BINDINGS} from 'angular2/http';



next() {
   this.http.get("your url")
     .map(res => res.json())  /* if its JSON */
     .subscribe(
        data => this.listdata = data,
        err => console.error(err),
        () => console.log("Done")
      )
    }

prev() {
  /* like next */
  }

您必须导入 Http 和 HTTP_BINDINGS。

http.get returns 一个可观察的（又名流）而不是 angular 1

中的承诺

Ayden Towfeek 的视频教程展示了如何在 youtube 上使用 http 和 observables tutorial

如何使用 RxJS 在 Angular2 中观察 DOM 事件？

How to observe DOM events in Angular2 using RxJS?

rxjs

angular