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

Question

我在Angular 2应用程序中使用ngx-progressbar栏。当应用程序首先加载它工作正常。第二次出现错误。我为订阅对象引用了一些像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

我知道这是一个老帖子，我相信，我们现在正在使用Angular 6。但是，我收到了这个错误并希望发布一个解决方案。

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

<强>实施例

错误代码：

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

好的代码：

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

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

祝你好运！

Answer 2

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

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

更新

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

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（）方法在调用时返回的Subscription对象。

Answer 4

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

1. 使用Subject而不是BehaviorSubject

2. 只需添加以下内容 订阅中的一行。

   <your service>.next(undefined);

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

我希望这会有所帮助。