2016-01-17 11 views
20
// Part of service 
public someEvent: EventEmitter<number> = new EventEmitter(); 

.... 

// Component 
@Component({ 
    selector: 'some-component', 
    template: `...` 
}) 
export class SomeComponent { 
    constructor(public service: Service) { 
    this.service.someEvent.subscribe((x) => { 
     // Do something 
    }); 
    } 
} 

SomeComponent viene visualizzato nel percorso /. Quando navigo su un percorso diverso nella mia applicazione e torno di nuovo, SomeComponent si iscriverà nuovamente all'evento, facendo sì che il callback si attivi due volte. Come iscriversi all'evento una volta o annullare l'iscrizione alla distruzione del componente e iscriversi nuovamente?Come iscriversi all'emettitore di eventi una volta?

// Can't subscribe after. 
ngOnDestroy() { 
    this.service.someEvent.unsubscribe(); 
} 
+0

Avete provato con ngOnInit? – micronyks

+0

@micronyks Sì, ma non ho avuto successo. Sempre secondo [questo sito] (http://learnangular2.com/lifecycle/) 'ngOnInit' viene attivato ogni volta proprio come la funzione di costruzione, ma attende l'inizializzazione dei componenti figlio. – Eggy

+1

'OnInit' è per l'associazione, non funzionerà per te ... prova [' CanReuse'] (https://angular.io/docs/ts/latest/api/router/CanReuse-interface.html) – Sasxa

risposta

27

Una chiamata a subscribe restituisce un instance of Disposable, che ha un metodo dispose.

Oppure se si utilizza RxJS 5, dispose has been renamed to unsubscribe (grazie a @EricMartinez).

E dal RxJS docs:

... quando non siamo più interessati a ricevere i dati siamo come viene in streaming, abbiamo chiamare Dispose sul nostro abbonamento.


Conservare il risultato della chiamata a subscribe e poi smaltire la sottoscrizione entro ngOnDestroy.

RxJS 5:

export class SomeComponent { 
    constructor (public service: Service) { 
    this.subscription = this.service.someEvent.subscribe((x) => {...}); 
    } 
    ngOnDestroy() { 
     this.subscription.unsubscribe(); 
    } 
} 

RxJS < 5:

export class SomeComponent { 
    constructor (public service: Service) { 
    this.subscription = this.service.someEvent.subscribe((x) => {...}); 
    } 
    ngOnDestroy() { 
     this.subscription.dispose(); 
    } 
} 
+4

In RxJS 5 [il comando è stato rinominato per annullare l'iscrizione] (https://github.com/ReactiveX/ RxJS/blob/master/MIGRATION.md # subscription-dispose-is-now-unsubscribe) –

+2

Grazie! Proprio come @EricMartinez ha detto, 'unsubscribe' invece di' dispose'. – Eggy

+0

@EricMartinez Grazie, aggiornerò la mia risposta! – sdgluck

2

Si può fare qualcosa di simile:

import { OnDestroy } from '@angular/core'; 
import { Subscription } from 'rxjs/Rx'; 

export class SomeComponent implements OnDestroy { 
    private _subscription: Subscription; 
    constructor(public service: Service) { 
    this._subscription = this.service.someEvent.subscribe((x) => { 
     // Do something 
    }); 
    } 
} 

ngOnDestroy(){ 
    this._subscription.unsubscribe(); 
} 
Problemi correlati