RXJS解决NGZORRO下拉框组件漂移的问题

问题描述：使用Angular+NGZORO时候，组件库的下拉框或时间选择框会出现滚动页面，然后漂移的问题。实际的想法是，滚动页面的时候，要么下拉框消失，要么随着页面滚动。

原因：找了一下资料，发现原因是选择框组件是被挂在到全局父节点上，所以会随着页面滚动而移动。

解决方案：响应式编程RXJS，实现滚动页面时候，使得下拉框自动消失。

首先提供的API ，[NzOpen]来控制下拉框的显示。

 那么想法就是，当用户滚动的时候会发出一个流stream，以此创建一个可观察对象observable。关闭的方法放在观测者observer当中。

另外，Subscription用来表示一段流的处置过程。简单来说就是 subscription = observable（observer）

这样可以使用subscription来释放资源，优化性能。

 [译] RxJS文档05——Subscription_weixin_34138521的博客-CSDN博客原文: http://reactivex.io/rxjs/manu...什么是Subscription? Subscription是一个对象，表示一种可被处置的资源，通常指代一个Observable流的执行过程。Subscription有一个重要的方法unsubscribe()，不需要参数，仅仅用来释放掉subscription实例所...https://blog.csdn.net/weixin_34138521/article/details/89042634?spm=1001.2101.3001.6650.6&utm_medium=distribute.pc_relevant.none-task-blog-2~default~OPENSEARCH~Rate-6-89042634-blog-114009991.pc_relevant_multi_platform_whitelistv3&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~OPENSEARCH~Rate-6-89042634-blog-114009991.pc_relevant_multi_platform_whitelistv3&utm_relevant_index=12

当页面初始化的时候，使用fromEvent（）新建一个可观测流

        this.scrollSubscription = fromEvent(
            document.getElementById('xxx'),
            'scroll'
        ).subscribe(() => {
            //将 NzOpen关闭的方法 变量赋值为false
        });

最后当NgDestory的时候，释放subscription，节约资源

this.scrollSubscription?.unsubscribe();

 2022/8/19 加入一些新的思考🤔

在Angular中哪些数据流是需要unsubscribe()的？如果我监听一个滚轮事件，到底对性能提升有多大影响。

2022/8/19 思考解决

关于RXJS，何时需要取消订阅 / 可观测对象的冷热之分_董厂长的博客-CSDN博客在 component 之间通信，我们会用到 Subject，BehaviorSubject，AsyncSubject，ReplaySubject 这四种 subject，它们都是Hot Observable，Hot Observable 不管有没有被订阅都会源源不断的发送值。在用这些操作符，比如 take(1)，拿到 Observable 发送的第一个值之后，RxJs 会主动的停止当前的 Observable，也就是销毁当前 Observable，并不需要手动再调用 unsubscribe()取消订阅。https://blog.csdn.net/dongnihao/article/details/126419334?spm=1001.2014.3001.5502