ObjectUnsubscribedError：当我在 Angular 2 中使用 ngx-progress 时，对象取消订阅错误答案

【问题标题】：ObjectUnsubscribedError: object unsubscribed error when I am using ngx-progress in angular 2ObjectUnsubscribedError：当我在 Angular 2 中使用 ngx-progress 时，对象取消订阅错误
【发布时间】：2017-04-17 08:19:27
【问题描述】：

我在 Angular 2 应用程序中使用ngx-progressbar bar。首次加载应用程序时，它工作正常。第二次显示错误。我为订阅对象推荐了几篇像medium.com 这样的文章。我没看清楚。每次点击路由器链接都需要制作进度条。

我附上了错误快照：

进度条码：

import { Component, AfterContentInit} from '@angular/core';
import { NgProgress } from 'ngx-progressbar'
@Component({
  selector: 'link-outlet',
  template: '<ng-progress [showSpinner]="false"></ng-progress>'
})
export class RoutingDirectiveComponent implements AfterContentInit{
  constructor(private ngProgress: NgProgress) {

  }
  ngAfterContentInit(){

   this.ngProgress.start();
   setTimeout(()=>{
     this.ngProgress.done();
   }, 2000);
  }
 }

您的建议将不胜感激。

【问题讨论】：

标签： angular angular2-services

【解决方案1】：

更新 - Angular 8

这个答案在 Angular 8 的语法上仍然有效。

我知道这是一篇旧帖子，我相信我们现在使用的是 Angular 6。但是，我收到此错误并想发布解决方案。

当我直接在我调用.subscribe() 的对象上调用.unsubscribe() 时，我遇到了这个问题。但是，当您订阅一个事件时，该方法会返回一个 Subscription 类型的值。您需要保存此内容（可能保存在组件的类中），然后在完成后对 该订阅对象 调用 unsubscribe。

示例

错误代码：

this.someEvent.subscribe(() => {
    // DO SOMETHING
})
...
this.someEvent.unsubscribe()

好代码：

this.myEventSubscription = this.someEvent.subscribe(() => {
     // DO SOMETHING
})
...
this.myEventSubscription.unsubscribe()

同样，您需要取消订阅 Subscription 对象，当您调用它时，.subscribe() 方法会返回该对象。

祝你好运！

【讨论】：

这太棒了，我什至没有意识到我正在这样做，太棒了，谢谢
取消订阅而不是事件的精彩展示。
我不知道为什么这个答案不在上面

【解决方案2】：

我真的很喜欢@kbpontius 所说的方式，所以我也在做同样的方法

无论何时订阅，都订阅新变量。所以取消订阅后就可以订阅了例子

错误代码：

this.someEvent.subscribe(() => {
    // DO SOMETHING
})
...

ngOnDestroy() {
     this.someEvent.unsubscribe()
}

好代码：

声明事件名称

myEventSubscription: any;

//现在可以这样使用了

this.myEventSubscription = this.someEvent.subscribe(() => {
     // DO SOMETHING
})

...

//现在在销毁组件的最后阶段取消订阅。如果你想在同一个组件中销毁服务，你也可以在其他功能中销毁

ngOnDestroy() {
  this.myEventSubscription.unsubscribe()
}

同样，您需要取消订阅 .subscribe() 方法在调用时返回的 Subscription 对象。

【讨论】：

【解决方案3】：

发生这种情况是因为在进度条运行时保存进度条的组件正在被销毁，因此您应该将<ng-progress></ng-progress> 放在根组件（或不会被销毁的组件）中

如果您正在使用 http 请求的进度，有一个名为 automagic progressbar 的新功能，您可能想尝试一下！

更新

从 v2.1.1 开始，您可以在任何地方使用该组件而不会出现该错误

【讨论】：

感谢您的回复。您能否举一些例子来在根组件或任何文章或链接中创建它。
@MathankumarK 只需在 AppComponent 模板中添加 <ng-progress></ng-progress>，然后在应用中的任何位置使用 NgProgressService 开始/停止进度

【解决方案4】：

我也遇到了同样的问题，我使用的是 BehaviorSubject，它总是保存最后一个响应，有 2 个解决方案。

使用主题而不是 BehaviorSubject
只需添加以下内容订阅内的行。

<your service>.next(undefined);

还记得取消订阅您手动创建的订阅。

我希望这会有所帮助。

【讨论】：