ObjectUnsubscribedError:当我在 angular 2 中使用 ngx-progress 时出现对象取消订阅错误 [英] ObjectUnsubscribedError: object unsubscribed error when I am using ngx-progress in angular 2

问题描述

我在 Angular 2 应用程序中使用

进度条码:

import { Component, AfterContentInit} from '@angular/core';从'ngx-progressbar'导入{ NgProgress}@成分({选择器:'链接出口'，模板:'<ng-progress [showSpinner]="false"></ng-progress>'})导出类 RoutingDirectiveComponent 实现 AfterContentInit{构造函数(私有 ngProgress:NgProgress){}ngAfterContentInit(){this.ngProgress.start();setTimeout(()=>{this.ngProgress.done();}, 2000);}}

您的建议将不胜感激.

解决方案

出现这种情况是因为进度条运行时持有进度条的组件正在被销毁，所以你应该把 <ng-progress><;/ng-progress> 在根组件(或未销毁的组件)中

如果您使用 http 请求的进度，则有一项名为 automagic progressbar，你可能想试试看！

更新

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

I am using 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 for subscribe object. I did't get clearly. I need to make progress bar every time when click the router links.

I attached error snapshot:

progress bar code:

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

Your suggestion will be grateful.

解决方案

This is happening because the component that holds the progressbar is being destroyed while the progressbar is running, so you should put <ng-progress></ng-progress> in a root component (or a component that does not get destroyed)

If you are using the progress for http requests there is a new feature called automagic progressbar, you might want to try it out!

Update

Since v2.1.1, you can use the component anywhere without getting that error

这篇关于ObjectUnsubscribedError:当我在 angular 2 中使用 ngx-progress 时出现对象取消订阅错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！