javascript - dynamically - Cómo cancelar una suscripción en Angular2

load external js script dynamically in angular 2

Question

¿Cómo se cancela una suscripción en Angular2? RxJS parece tener un método de eliminación, pero no puedo entender cómo acceder a él. Entonces tengo un código que tiene acceso a un EventEmitter y se suscribe a él, así:

var mySubscription = someEventEmitter.subscribe(
    (val) => {
        console.log(''Received:'', val);
    },
    (err) => {
        console.log(''Received error:'', err);
    },
    () => {
        console.log(''Completed'');
    }
);

¿Cómo puedo usar mySubscription para cancelar la suscripción?

Answer 1

EDITAR: Esto no se aplica a RxJS 5, que es lo que angular2 está utilizando.

Pensé que estás buscando el método de eliminación en Disposable .

el método de suscripción devuelve un Desechable ( link )

Parece que no puedo encontrarlo más explícitamente en los documentos, pero esto funciona ( jsbin ):

var observable = Rx.Observable.interval(100);

var subscription = observable.subscribe(function(value) {
   console.log(value);
});

setTimeout(function() {
  subscription.dispose();           
}, 1000)

Extrañamente, darse de baja parece estar funcionando para usted mientras no está funcionando para mí ...

Answer 2

¿Estás buscando darte de baja?

mySubscription.unsubscribe();

Answer 3

Demasiadas explicaciones diferentes para darse de baja en Observables para ng2, me llevó mucho tiempo encontrar la respuesta correcta. A continuación se muestra un ejemplo de trabajo (estaba tratando de acelerar el movimiento del mouse).

import {Injectable, OnDestroy} from "@angular/core";
import {Subscription} from "rxjs";

@Injectable()
export class MyClass implements OnDestroy {
  
  mouseSubscription: Subscription; //Set a variable for your subscription
  
  myFunct() {
    // I''m trying to throttle mousemove
    const eachSecond$ = Observable.timer(0, 1000);
    const mouseMove$ = Observable.fromEvent<MouseEvent>(document, ''mousemove'');
    const mouseMoveEachSecond$ = mouseMove$.sample(eachSecond$);
    
    this.mouseSubscription = mouseMoveEachSecond$.subscribe(() => this.doSomethingElse());
  }

  doSomethingElse() {
    console.log("mouse moved");
  }
  
  stopNow() {
    this.mouseSubscription.unsubscribe();
  }
  
  ngOnDestroy() {
    this.mouseSubscription.unsubscribe();
  }
  
}

Answer 4

El enfoque recomendado es usar operadores RxJS como el operador takeUntil . A continuación se muestra el fragmento de código que muestra cómo usarlo: -

import { Component, OnInit, OnDestroy } from ''@angular/core'';
import { interval, Subject } from ''rxjs'';
import { takeUntil } from ''rxjs/operators'';

@Component({
    selector: ''app-root'',
    templateUrl: ''./app.component.html''
})
export class AppComponent implements OnInit, OnDestroy {
    private ngUnsubscribe = new Subject();

    constructor() { }

    ngOnInit() {
        var observable1 = interval(1000);
        var observable2 = interval(2000);

        observable1.pipe(takeUntil(this.ngUnsubscribe)).subscribe(x => console.log(''observable1: '' + x));
        observable2.pipe(takeUntil(this.ngUnsubscribe)).subscribe(x => console.log(''observable2: '' + x));
    }

    ngOnDestroy() {
        this.ngUnsubscribe.next();
        this.ngUnsubscribe.complete();
    }
}

Puede encontrar una explicación detallada del tema here

Answer 5

Pensé que también ponía mis dos centavos. Yo uso este patrón:

import { Component, OnInit, OnDestroy } from ''@angular/core'';
import { Subscription } from ''rxjs/Subscription'';

@Component({
    selector: ''my-component'',
    templateUrl: ''my.component.html''
})
export class MyComponent implements OnInit, OnDestroy {

    private subscriptions: Array<Subscription> = [];

    public ngOnInit(): void {
        this.subscriptions.push(this.someService.change.subscribe(() => {
            [...]
        }));

        this.subscriptions.push(this.someOtherService.select.subscribe(() => {
            [...]
        }));
    }

    public ngOnDestroy(): void {
        this.subscriptions.forEach((subscription: Subscription) => {
            subscription.unsubscribe();
        });
    }
}

EDITAR

Leí la documentación el otro día y encontré un patrón más recomendado:

ReactiveX/RxJS/Subscription

Pros:

Administra las nuevas suscripciones internamente y agrega algunas comprobaciones ordenadas. Preferiría este método en la función :).

Contras:

No está 100% claro cuál es el flujo del código y cómo se ven afectadas las suscripciones. Tampoco está claro (solo mirando el código) cómo se trata con las suscripciones cerradas y si todas las suscripciones se están cerrando si se llama a darse de baja.

import { Component, OnInit, OnDestroy } from ''@angular/core'';
import { Subscription } from ''rxjs/Subscription'';

@Component({
    selector: ''my-component'',
    templateUrl: ''my.component.html''
})
export class MyComponent implements OnInit, OnDestroy {

    private subscription: Subscription = new Subscription();

    public ngOnInit(): void {
        this.subscription.add(this.someService.change.subscribe(() => {
            [...]
        }));

        this.subscription.add(this.someOtherService.select.subscribe(() => {
            [...]
        }));
    }

    public ngOnDestroy(): void {
        /*
         * magic kicks in here: All subscriptions which were added
         * with "subscription.add" are canceled too!
         */
        this.subscription.unsubscribe();
    }
}

Answer 6

Prefiero personalmente usar un Asunto para cerrar todas las suscripciones que un componente pueda tener en el paso de destruir ciclo de vida que se puede lograr de esta manera:

import { Component} from ''@angular/core'';
import { Subject } from "rxjs/Rx";

@Component({
  selector:    ''some-class-app'',
  templateUrl: ''./someClass.component.html'',
  providers:   []
})

export class SomeClass {  

  private ngUnsubscribe: Subject<void> = new Subject<void>(); //This subject will tell every subscriptions to stop when the component is destroyed.

  //**********
  constructor() {}

  ngOnInit() {

    this.http.post( "SomeUrl.com", {}, null ).map( response => {

      console.log( "Yay." );

    }).takeUntil( this.ngUnsubscribe ).subscribe(); //This is where you tell the subscription to stop whenever the component will be destroyed.
  }

  ngOnDestroy() {

    //This is where we close any active subscription.
    this.ngUnsubscribe.next();
    this.ngUnsubscribe.complete();
  }
}

Answer 7

Utilizar

if(mySubscription){
  mySubscription.unsubscribe();
}

Answer 8

ngOnDestroy(){
   mySubscription.unsubscribe();
}

Prefiere cancelar la suscripción de rxjs mientras cancela el componente, es decir, eliminarlo del DOM para evitar pérdidas de memoria innecesarias