Cómo cancelar una suscripción en Angular2

Pensé que había puesto mis dos centavos también. 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

Ventajas:

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 de código y cómo se ven afectadas las suscripciones. Ni lo es claro (solo con mirar el código) cómo se ocupa de 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();
    }
}

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

Habría pensado que está buscando el método de eliminación en Desechable.

El método subscribe 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 que no está funcionando para mí...

Demasiadas explicaciones diferentes de darse de baja en Observables para ng2, me llevó años encontrar la respuesta correcta. A continuación se muestra un ejemplo de trabajo (estaba tratando de acelerar mousemove).

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

ngOnDestroy(){
   mySubscription.unsubscribe();
}

Prefiere cancelar la suscripción de rxjs mientras destruye el componente, es decir, elimina del DOM para evitar fugas de memoria innecesarias

Prefiero usar personalmente un Sujeto para cerrar todas las suscripciones que un componente pueda tener en el paso de ciclo de vida de destrucción 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();
  }
}

Use

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

El enfoque recomendado es utilizar operadores RxJS como el Tomar hasta operadora. 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();
    }
}

Usted puede encontrar una explicación detallada del tema aquí