angular Observable 怎么自动取消订阅

rxjs 的 Observable（可观察对象）极大的方便了我们的开发，但是当 subscribe（订阅）没有多次时，前一个订阅没有取消，导致订阅方法被执行了多次。ngOnInit(): void {this.query.select().subscribe((data) => {console.log(data);});}这种情况怎么办呢，可以手动取消订阅，但是有没有办法在页面Dest

小妖666

992人浏览 · 2021-01-16 17:00:35

小妖666 · 2021-01-16 17:00:35 发布

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 时会生动取消订阅。