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

Question

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

我不知道是否应该使用 Angular2 或RxJS附带的 EventEmitter 。

有人能提供一个例子吗？

Answer 1

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

在模板中绑定到click事件

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

在你的课堂上（我猜你使用的是Typescript）定义next（）和prev（）

＆＃13;

＆＃13;

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 */
  }

＆＃13;

＆＃13;

＆＃13;

您必须导入Http和HTTP_BINDINGS。

http.get返回一个observable（aka流），而不是像angular 1

中的promise

Ayden Towfeek提供了一个视频教程，展示了如何在YouTube上使用http和observable tutorial