订阅/取消订阅 VS 创建/TakeUntil？

Posted 2023-02-22

【中文标题】订阅/取消订阅 VS 创建/TakeUntil？

【英文标题】：Subscribe/Unsubscribe VS Create/TakeUntil?

【发布时间】：2017-04-10 06:21:52

【问题描述】：

我正在使用 RxJs 在 Angular2 中开发一个组件。这是我使用 RxJs 的第一步，我正在讨论如何使用 RxJs 的优点和 const。

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

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

验证被处理为对 keyup 上的 observable 的订阅，带有 debounceTime 和 distinctUntilChanged。

有两个事件可用：“开始编辑”，当用户单击文本框时，“结束编辑”，当用户按 ENTER、ESCAPE、TAB 或单击控件外时。

考虑到网页上会有20多个此类控件，管理keyUp订阅的最佳实践是什么？例子：

每次触发“开始编辑”时，在 keyup 上创建订阅，如 Observable.fromEvent('keyup') 并添加操作符“takeUntil”和“结束编辑”事件作为参数？ 将observable保存在某处，每次触发“开始编辑”时，订阅它处理输入，当“结束编辑”发生时，取消订阅？ A 或 B 之间没有显着差异 其他建议？

谢谢！ 塞巴斯蒂安

【问题讨论】：

一个代码值一千字。

【参考方案1】：

我会这样做：

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 上阅读更多信息。