angular2 observable.fromEvent vs按钮单击

时间:2017-09-18 16:28:18

标签: angular typescript rxjs

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

这两种方法有什么区别?我该什么时候去买另一个?

1 个答案:

答案 0 :(得分:2)

Observables方法更灵活。有许多功能可以与Observables一起使用。自己阅读documentation非常好。

如果您只想处理click并执行基本操作,只需使用按钮单击,但如果您需要使用click事件进行操作,并且您认为需要为该操作编写大量逻辑(示例:fire the event only after some time from previous onemerge您点击其他api calls并在显示标记之前对输入数据进行一些操作),首先查看Observables的文档,可能有方法可以帮助您实现逻辑实施。

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

&#13;
&#13;
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'));
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src='https://unpkg.com/@reactivex/rxjs@5.4.3/dist/global/Rx.js'></script>
<button id='btn'>Click</button>
&#13;
&#13;
&#13;