可观察，在 ngOnDestroy 中取消订阅不起作用答案

【问题标题】：Observable, unsubscribe in ngOnDestroy not working可观察，在 ngOnDestroy 中取消订阅不起作用
【发布时间】：2018-11-22 23:21:30
【问题描述】：

我有一个对话框打开并包含一个组件...在我订阅的组件中。关闭时我想退订..

private deviceObserver: Observable<BreakpointState> = this.breakpointObserver.observe([Breakpoints.XSmall]);

this.deviceObserver.subscribe(result => {
  if (result.matches) {
    this.deviceType = 'mobile';
  } else {
    this.deviceType = 'desktop';
  }
});

ngOnDestroy() {
 this.deviceObserver.unsubscribe();
}

这给了我这个错误：

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

【问题讨论】：

首先您必须订阅，将其分配给一个变量，然后您可以取消订阅。

标签： angular rxjs observable unsubscribe

【解决方案1】：

您只能在Subscription 上使用unsubscribe。您正在尝试在 Observable 上使用它。

如果您使用 async 管道在组件内部使用 observable，则无需取消订阅。这是由框架自动完成的。

但是，如果您在 component.ts 中使用它，那么一种方法就是这样做。还有其他选项，例如使用 takeUntil 管道：

private deviceObserver: Observable<BreakpointState> = 
                        this.breakpointObserver.observe([Breakpoints.XSmall]);

ngOnInit() {
  this.sub = this.deviceObserver.subscribe(result => {
    if (result.matches) {
      this.deviceType = 'mobile';
    } else {
      this.deviceType = 'desktop';
    }
  });
}

ngOnDestroy() {
 this.sub.unsubscribe();
}

【讨论】：

我已经尝试过了，但是这破坏了功能..做了一些更多的挖掘，如果我在 ngOnDestroy 中这样做它会中断..所以我将取消订阅移动到 closeDialog 方法并且效果很好！ :)
这似乎不太可能。您的代码在 observable 上使用 unsubscribe，您不应该这样做:) 但可以安全地引用订阅（或使用 takeUntil）
查看我更新的问题（缺少代码哈哈）.. 还发布了工作代码作为答案。我认为当我打开 cdk 的 OverlayRef 并将组件附加到 ComponentPortal 时出现问题
您的答案中的代码使用订阅参考，您的问题中的代码没有。我看不出为什么在 ngOnDestroy 中使用订阅引用不起作用
好吧，但 document.addEventListener('keydown'... 代码只在我添加 ngOnDestroy 时的第一个键下有效（有或没有订阅/取消订阅）

【解决方案2】：

出于某种原因，在 ngOnDestroy 中取消订阅会破坏应用程序...这就是我解决它的方法：

private deviceObserver: Observable<BreakpointState> = this.breakpointObserver.observe([Breakpoints.XSmall]);
private breakpointObserverSubscription: Subscription;


// in ngOnInit()
this.breakpointObserverSubscription = this.deviceObserver.subscribe(result => {
  if (result.matches) {
    this.deviceType = 'mobile';
  } else {
    this.deviceType = 'desktop';
  }
});

public closeSearch() {
 this.onClose.apply();
 this.breakpointObserverSubscription.unsubscribe();
}

【讨论】：