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

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

我不知道我是否应该使用EventEmitter附带Angular2或RxJS，因为它是。

任何人都可以提供一个例子吗？

2015-11-26 wonderful world

可以或者使用'EventEmitter'从按钮发出，或者你可以使用['Observable.fromEvent']（https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/ fromevent.md）*请注意，示例中的EventEmitter是Node的，而不是角的* –

您提供的示例可能有效。但有没有更好的解决方案，使用angular1来描述[这里]（https://github.com/Reactive-Extensions/rx.angular.js/）。 –

我没有一个完整的例子，但我可以画出你的解决方案：

在模板结合的Click事件

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

在你的班级（我猜你使用Typescript）define 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返回一个可观察到的（又名流）不是一个喜欢承诺在角1

有一个从艾登Towfeek的视频教程，说明如何使用HTTP和观测YouTube上tutorial工作

来源

2015-11-26 21:25:51

该视频很有帮助。我有一些[GitHub上的示例代码]（https://github.com/ReactiveX/RxJS/issues/811）。我不确定我在代码中做了什么是正确的。我试图围绕功能性和反应性编程进行讨论。 –

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

回答

相关问题