come annullare l'iscrizione molti abbonati in angolare 2

Question

ho shareService e sottoscrivere che si trova in un'altra componenti:

import { Component, Input, OnDestroy } from '@angular/core'; 
import { MissionService } from './mission.service'; 
import { Subscription } from 'rxjs/Subscription'; 
@Component({ 
    selector: 'my-astronaut', 
    template: ` 
    <p> 
     {{astronaut}}: <strong>{{mission}}</strong> 
     <button 
     (click)="confirm()" 
     [disabled]="!announced || confirmed"> 
     Confirm 
     </button> 
    </p> 
    ` 
}) 
export class AstronautComponent implements OnDestroy{ 
    @Input() astronaut: string; 
    mission = "<no mission announced>"; 
    confirmed = false; 
    announced = false; 
    subscription:Subscription; 

    constructor(private missionService: MissionService) { 
    this.subscription = missionService.missionAnnounced$.subscribe(
     mission => { 
     this.mission = mission; 
     this.announced = true; 
     this.confirmed = false; 
    }) 




    } 
    confirm() { 
    this.confirmed = true; 
    this.missionService.confirmMission(this.astronaut); 
    } 
    ngOnDestroy(){ 
    // prevent memory leak when component destroyed 
    this.subscription.unsubscribe(); 

    } 
} 

voglio sapere se ho 2 abbonati nel mio constructor, come annullare l'iscrizione per due volte gli abbonati in ngDestroy? Dovrei usare subscription2:Subscription;? E in ngDestroy this.subscription2.unsubscribe();? questo è vero?

Answer 1

È possibile raccogliere le sottoscrizioni che si desidera annullare l'iscrizione in una sola volta in ngOnDestroy() in un array

export class AstronautComponent implements OnDestroy{ 
    @Input() astronaut: string; 
    mission = "<no mission announced>"; 
    confirmed = false; 
    announced = false; 
    subscriptions:Subscription[] = []; 

    constructor(private missionService: MissionService) { 
    this.subscriptions.push(missionService.missionAnnounced$.subscribe(
     mission => { 
     this.mission = mission; 
     this.announced = true; 
     this.confirmed = false; 
    })); 

    this.subscriptions.push(fooService.fooObservable$.subscribe(
     ... 
    })); 
    } 

    confirm() { 
    this.confirmed = true; 
    this.missionService.confirmMission(this.astronaut); 
    } 

    ngOnDestroy(){ 
    // prevent memory leak when component destroyed 
    this.subscriptions.forEach(s => s.unsubscribe()); 
    } 
} 

Answer 2

Un Subscription può contenere abbonamenti bambino e sicuro tutti annullare l'abbonamento. Questo metodo gestisce possibili errori (ad es. Se eventuali abbonamenti secondari sono nulli). Inoltre, se vengono aggiunti degli abbonamenti dopo la chiamata a ngOnDestroy, verranno immediatamente annullati.

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

export class MyComponent implements OnDestroy { 
    ob1: Observable<number>; 
    ob2: Observable<number>; 
    subManager = new Subscription(); 

    constructor() { 
     this.ob1 = Observable.interval(1000); 
     this.ob2 = Observable.interval(2000); 

     let sub1 = this.ob1.subscribe(val => console.log(val)); 
     let sub2 = this.ob2.subscribe(val => console.log(val)); 

     this.subManager 
      .add(sub1) 
      .add(sub2); 
    } 

    ngOnDestroy() { 
     this.subManager.unsubscribe(); 
    } 
} 

Dal documentation:

Inoltre, le sottoscrizioni possono essere raggruppate attraverso l'add() metodo, che sarà collegare un abbonamento bambino al corrente abbonamento. Quando un abbonamento è annullato, tutti i suoi figli (e i suoi nipoti) saranno annullati.

...

Se questa richiesta è già in uno stato chiuso, la logica passata lacrima giù verrà eseguita immediatamente.