ObjectUnsubscribedError: object unsubscribed error when I am using ngx-progress in angular 2

Question

我正在使用 ngx-progressbar bar in Angular 2 application. When app loading first it is working fine. second time it is showing error. I referred few article like 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);
  }
 }

您的建议将不胜感激。

Answer 1

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

如果您正在使用路由器更改事件的进度，则有一个功能模块 NgProgressRouterModule

如果您正在使用 http 请求的进度，则有一个功能模块 NgProgressHttpModule

更新

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

Answer 2

已更新 - Angular 8

这个答案在句法上对 Angular 8.

仍然有效

我知道这是一个旧的 post，我们现在在 Angular 6，我相信。但是，我遇到了这个错误，想 post 一个解决方案。

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

例子

错误代码：

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

好的代码：

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

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

祝你好运！

Answer 3

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

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

错误代码：

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

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

好的代码：

声明事件名称

myEventSubscription: any;

//现在可以这样使用了

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

...

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

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

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

Answer 4

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

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

<your service>.next(undefined);

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

希望对您有所帮助。

ObjectUnsubscribedError: object unsubscribed error when I am using ngx-progress in angular 2

ObjectUnsubscribedError: object unsubscribed error when I am using ngx-progress in angular 2

angular2-services

angular

更新

已更新 - Angular 8