jak wypisać kilka abonenta w kątowym 2

Question

mam shareService i zapisz się, że znajduje się w innej części:

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

    } 
} 

chcę wiedzieć czy mam 2 abonentów w moim constructor, jak wypisać dwukrotnie abonentów w ngDestroy? Powinienem użyć subscription2:Subscription;? I ngDestroy this.subscription2.unsubscribe();? to prawda?

Answer 1

Można zbierać zapisy, które chcesz wypisać się naraz w ngOnDestroy() w tablicy

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

Subscription może pomieścić subskrypcje potomnych i bezpiecznie wypisać je wszystkie. Ta metoda obsługuje możliwe błędy (np. Jeśli jakiekolwiek subskrypcje podrzędne mają wartość NULL). Ponadto, jeśli jakiekolwiek subskrypcje zostaną dodane po wywołaniu ngOnDestroy, zostaną one natychmiast anulowane.

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

Z documentation:

Dodatkowo zapisy mogą być grupowane przez add() metoda, która będzie zajmować się dzieckiem subskrypcji do bieżącego Abonament. Gdy subskrypcja zostanie anulowana, wszystkie jej dzieci (i jej wnuki) również zostaną anulowane.

...

Jeśli subskrypcja jest już w stanie zamkniętym, łza logika przeszedł dół zostanie wykonany natychmiast.