Angular 2 – FormGroup ValueChanges Cancelar suscripción

No olvides que en las ciencias un problema suele tener varias soluciones, así que nosotros aquí mostraremos lo más óptimo y mejor.

Solución:

los subscribe() la llamada devuelve un Subscription y esto es lo que usas para darte de baja:

class JobToolbarComponent

  private subscr:Subscription;

  ngOnInit() 
    ...
    this.subscr = this.form.valueChanges ...
    ...
  

  ngOnDestroy() 
    this.subscr.unsubscribe();
  
}

He creado esta siguiente función

export function AutoUnsubscribe(exclude = []) 

    return function (constructor) 

        const original = constructor.prototype.ngOnDestroy;

        constructor.prototype.ngOnDestroy = function () 
            for (let prop in this) 
                const property = this[prop];
                if (!exclude.includes(prop)) 
                    if (property && (typeof property.unsubscribe === "function")) 
                        property.unsubscribe();
                    
                
            
            original && typeof original === 'function' && original.apply(this, arguments);
        ;
    

que en realidad puede usar para cancelar automáticamente la suscripción de todos los observadores, pero debe almacenarlos en propiedades públicas para que esta función pueda interceptarlo e invocar la cancelación de suscripción en eso. Cómo se usa se menciona a continuación: –

@AutoUnsubscribe()
@Component(
    selector: 'account-login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.scss']
)
export class LoginComponent implements OnInit 


    public submitWatcher: Subscription;

     submit() 
        this.submitWatcher = this.authService.login(this.loginForm.getRawValue())
            .subscribe(res => 
                if (this.returnUrl) 
                    this.router.navigate([this.returnUrl]);
                
                else 
                    this.router.navigate(['/special']);
                
            , (error) => 
                alert(JSON.stringify(error.data));
            );
    

Para obtener más información sobre cómo usar el decorador, lea este blog de donde tomé la idea y es genial.

Blog

Podrías hacer lo siguiente:

// private variable to hold all your subscriptions for the component
private subscriptions: Subscription[] = [];

// when you subscribe to an observable,
// you can push all subscription this.subscriptions

this.subscriptions.push(
       this.form.valueChanges.pipe(
            .debounceTime(2000)) 
            .subscribe(val => this.onFormChange.bind(this)),

       this.observe2$.subscribe(val => this.somemethod(val))
    );

// in ngondestroy
    ngOnDestroy(): void 
        if (this.subscriptions && this.subscriptions.length > 0) 
            this.subscriptions.forEach(s => s.unsubscribe());
        
    

Si tienes alguna suspicacia y disposición de enriquecer nuestro post eres capaz de realizar una interpretación y con placer lo leeremos.

---

---

Utiliza Nuestro Buscador