angular Observable 怎么自动取消订阅

最新推荐文章于 2023-06-25 10:57:58 发布

小妖666

最新推荐文章于 2023-06-25 10:57:58 发布

阅读量969

点赞数

分类专栏： B-JavaScript 文章标签： angular observable 订阅 destroy

本文链接：https://blog.csdn.net/weixin_38883338/article/details/112715272

版权

B-JavaScript 专栏收录该内容

110 篇文章 2 订阅

订阅专栏

本文介绍了在Angular开发中，如何使用RxJS的Observable时避免因未取消订阅导致的问题。通过引入ngneat/until-destroy库，可以在组件销毁时自动取消订阅，防止内存泄漏。示例代码展示了在InboxComponent中如何使用until-destroy装饰器来确保在组件被销毁时自动取消订阅。

摘要由CSDN通过智能技术生成

rxjs 的 Observable（可观察对象）极大的方便了我们的开发，但是当 subscribe（订阅）没有多次时，前一个订阅没有取消，导致订阅方法被执行了多次。

  ngOnInit(): void {
    this.query.select().subscribe((data) => {
      console.log(data);
    });
  }

这种情况怎么办呢，可以手动取消订阅，但是有没有办法在页面Destroy 后自动取消订阅呢？

使用 until-destroy

npm install @ngneat/until-destroy

使用方法：

import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';

@UntilDestroy()
@Component({
  selector: 'app-welcome',
  templateUrl: './welcome.component.html',
  styles: [],
})
export class InboxComponent {
  ngOnInit(): void {
    this.query
      .select()
      .pipe(untilDestroyed(this))
      .subscribe((data) => {
        console.log(data);
      });
  }
}

使用后当页面 destroy 时会生动取消订阅。