angular2 observable.fromEvent 与按钮单击

标签 angular typescript rxjs

我有一些代码交替使用两者 <button (click)="callsomefucntion" />Observable.fromEvent<MouseEvent>(button.nativeElement.'click')

这两种方法有什么区别?我什么时候应该从一个到另一个?

最佳答案

Observables 方法更加灵活。有很多函数可以与 Observables 一起使用。阅读documentation会非常好。靠你自己。

如果您只想处理click并执行基本操作,只需使用按钮单击,但如果您需要使用click事件进行操作并且您认为需要编写该操作的逻辑很多(例如:仅在前一个事件经过一段时间后才触发事件您的点击与其他api调用并执行一些操作在标记中显示之前对传入数据进行操作),首先查看 Observables 的文档,可能有一些方法可以帮助您实现逻辑实现。

应用三种方法时的执行顺序。

const button = $('#btn');

document.getElementById('btn').addEventListener('click', () => console.log('From pure callback'));

Rx.Observable.fromEvent(button, 'click')
.subscribe(() => console.log('From observable'));

button.on('click', () => console.log('From jQuery callback'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://unpkg.com/@reactivex/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="95e7edffe6d5a0bba1bba6" rel="noreferrer noopener nofollow">[email protected]</a>/dist/global/Rx.js'></script>
<button id='btn'>Click</button>

关于angular2 observable.fromEvent 与按钮单击,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46284135/

相关文章:

angular - 为什么 RxJS 主题上的 next() 方法停止通知前端

angular - 正确指定 tslint 包的路径

angular - 如何在ionic 2中使用第三方javascript库(pixijs)?

angular - 与不同的 Angular 应用程序共享 Material 主题

typescript - 如何找到所有用某种装饰装饰的类?

angular - RxJS 主题和 Angular 2 组件

typescript - typescript 中的 never 和 void 有什么区别?

javascript - 在 angular1 项目中重载 $injector.get 的 typescript 接口(interface)定义

typescript - 加载 RxJS Typescript 类型而不从 CommonJS 模块导入?

javascript - 在 RxJS Tap 中订阅对于异步逻辑来说是不好的做法吗?