如何使用RxJS观察Angular2中的DOM事件?
问题描述:
我使用Angular2 Alpha 46。我有一个列表视图组件,如下所示。我希望观察PREV和NEXT按钮中的点击事件,并通过承诺调用Web API来检索数据并更新列表。如何使用RxJS观察Angular2中的DOM事件?
我不知道我是否应该使用EventEmitter附带Angular2或RxJS,因为它是。
任何人都可以提供一个例子吗?
答
我没有一个完整的例子,但我可以画出你的解决方案:
在模板结合的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工作
+0
该视频很有帮助。我有一些[GitHub上的示例代码](https://github.com/ReactiveX/RxJS/issues/811)。我不确定我在代码中做了什么是正确的。我试图围绕功能性和反应性编程进行讨论。 –
可以或者使用'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/)。 –