你如何取消订阅 angular 中的 apollo observable？

Question

我正在使用 apollo-angular 构建一个 angular (4.x) 应用程序，我想知道如何取消订阅 apollo observables（如果你需要的话）。

我正在尝试通过创建查询来遵循 this response 中的指导：

this.query = this.apollo.watchQuery<LatestReportQueryResponse>({
  fetchPolicy: 'network-only',
  query: myQuery
});

分配一个新的主题：

  private ngUnsubscribe: Subject<void> = new Subject<void>();

订阅查询：

this.query.takeUntil(this.ngUnsubscribe).subscribe(({ data }) => {...}

然后在 onDestroy 事件循环中销毁所有活动的可观察对象，例如：

ngOnDestroy() {
    this.ngUnsubscribe.next();
    this.ngUnsubscribe.complete();
  }

添加.takeUntil(this.ngUnsubscribe) 后，我遇到如下lint 错误：

“Subject”类型的参数不能分配给“Observable”类型的参数。

或者当我尝试手动取消订阅 ApolloQueryObservable 时，我得到：

“ApolloQueryObservable”类型上不存在属性“取消订阅”。您指的是“订阅”吗？

apollo observables 是否需要取消订阅？

Answer 1

this.query.takeUntil(this.ngUnsubscribe).subscribe(...) 的返回值应该为您提供取消订阅功能。

订阅和保存退订功能：

this.unsubscribe = this.query.takeUntil(this.ngUnsubscribe).subscribe(...)

在onDestroy事件循环中，调用函数：

this.unsubscribe()

Answer 2

虽然问题正在回答，但这是一个更具体的场景，可以更多地解释这个问题，所以在此处添加下面的博客链接。 https://www.digitalocean.com/community/tutorials/angular-takeuntil-rxjs-unsubscribe

Answer 3

import { from, Subscription } from 'rxjs';

export class CalendarWeekViewStdComponent implements OnInit, OnDestroy, AfterViewInit {
private subscriptionName: Subscription;

ngOnInit() {
this.subscriptionName = this.settingService.diarySettings.subscribe(settings => {

 });
}
  ngOnDestroy(): void {
if (this.subscriptionName) {
      this.subscriptionName.unsubscribe();
    }
}
}

Answer 4

我们经常使用一种干净的方式，使您能够处理第二个 observable ngUnsubscribe。

它由 1-将您的订阅存储在类型的属性中：Subscription， 2 - 在销毁时，您必须调用此属性的函数 subscribe。

如果您有多个订阅，则可以使用数组

import { from, Subscription } from 'rxjs';

private subscriptions: Subscription[] = [];
ngOnInit() {
this.subscriptions.push( this.settingService.diarySettings.subscribe(settings => {

 }));
}
ngOnDestroy(): void {
  this.subscriptions.forEach(sub => sub.unsubscribe());
 }