订阅/取消订阅VS Create / TakeUntil?

时间:2016-11-25 20:32:15

标签: javascript angular rxjs

我正在使用RxJs在Angular2中开发一个组件。这是我使用RxJs的第一步,我正在讨论如何使用RxJs的专业人士和const。

该组件基于文本框。当文本框被动,失焦时,文本框显示信息。当用户点击它时,焦点位于文本框上,其下方会出现一个工具提示,用于在用户编辑文本时显示信息。

在每个KeyUp上,处理文本框的值并验证多个业务规则,然后更新弹出窗口以向用户提供反馈。

使用debounceTime和distinctUntilChanged将验证作为对keyup上的observable的订阅进行处理。

有两个可用事件:“开始编辑”,当用户点击文本框时,以及“结束编辑”,当用户按ENTER,ESCAPE,TAB或单击控件时。

考虑到网页上将有超过20种此类控件,管理keyUp订阅的最佳做法是什么?例子:

  1. 每次触发“开始编辑”时,都会在密钥上创建订阅,例如Observable.fromEvent('keyup'),并添加运算符“takeUntil”并将“end editing”事件作为参数?
  2. 保持可观察的位置,每次触发“开始编辑”,订阅它以处理输入,当“结束编辑”发生时,取消订阅它?
  3. A或B
  4. 之间没有显着差异
  5. 其他建议?
  6. 谢谢! 塞巴斯蒂安

1 个答案:

答案 0 :(得分:0)

我会做这样的事情:

onKeyUpObservable
    .window(
        startEditingObservable,
        function() { return endEditingObservable; }
    )
    .subscribe(keyUpEvent => {
        // Here you will get key up events that happen between 
        // start editing and end editing... 
    });

您可以在window运算符here上阅读更多内容。