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();