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

Question

我在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);
  }
 }

您的建议将不胜感激.

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

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

每当您订阅时，请订阅新变量。所以取消订阅后就可以订阅了 例子

错误代码：

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

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

好代码：

声明事件名称

myEventSubscription: any;

//现在可以这样使用了

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

...

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

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

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

Answer 3

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

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

更新

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