Estoy usando la barra ngx-progressbar en la aplicación Angular 2. Cuando la aplicación se carga primero, funciona bien. segunda vez que muestra error. Me referí a algunos artículos como medium.com para el objeto de suscripción. No me quedó claro. Necesito hacer una barra de progreso cada vez que haga clic en los enlaces del enrutador.
código de barras de progreso:
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); } }Su sugerencia será agradecida.
Esta respuesta sigue siendo válida sintácticamente para Angular 8.
Me doy cuenta de que esta es una publicación anterior, creo que ahora estamos en Angular 6. Sin embargo, recibí este error y quería publicar una solución.
Tuve este problema cuando llamé a .unsubscribe() directamente en el objeto al que había llamado .subscribe() . Sin embargo, cuando se suscribe a un evento, ese método devuelve un valor escrito por Subscription . Debe guardar esto (posiblemente en la clase de su componente), luego llamar para cancelar la suscripción en ese objeto de suscripción cuando haya terminado.
Ejemplos
Código incorrecto:
this.someEvent.subscribe(() => { // DO SOMETHING }) ... this.someEvent.unsubscribe()Buen código:
this.myEventSubscription = this.someEvent.subscribe(() => { // DO SOMETHING }) ... this.myEventSubscription.unsubscribe() Nuevamente, debe darse de baja del objeto Subscription que devuelve el método .subscribe() cuando lo llama.
¡Buena suerte!
Realmente me gustó la forma en que dijo @kbpontius, así que también estoy haciendo el mismo enfoque.
Cada vez que se suscriba, suscríbase en la nueva variable. Entonces, después de cancelar la suscripción, se puede suscribir Ejemplos
Código incorrecto:
this.someEvent.subscribe(() => { // DO SOMETHING }) ... ngOnDestroy() { this.someEvent.unsubscribe() }Buen código:
Declarar el nombre del evento
myEventSubscription: any;//Ahora se puede usar así
this.myEventSubscription = this.someEvent.subscribe(() => { // DO SOMETHING })...
// Ahora anule la suscripción de esto en la última fase de destrucción del componente. También puede destruir en otra función si desea destruir el servicio en el mismo componente
ngOnDestroy() { this.myEventSubscription.unsubscribe() }Nuevamente, debe darse de baja del objeto Suscripción que devuelve el método .subscribe() cuando lo llama.
Esto sucede porque el componente que contiene la barra de progreso se destruye mientras se ejecuta la barra de progreso, por lo que debe colocar <ng-progress></ng-progress> en un componente raíz (o un componente que no se destruya)
Si está utilizando el progreso para el evento de cambio de enrutador, hay un módulo de funciones NgProgressRouterModule
Si está utilizando el progreso para solicitudes http, hay un módulo de funciones NgProgressHttpModule
Desde v2.1.1, puede usar el componente en cualquier lugar sin obtener ese error