如何以角度2取消订阅多个订阅者

Question

我有另一个组件的shareService和subscribe:

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

  }
}

我想知道我是否有2个订阅者constructor,如何取消订阅ngDestroy中的两个订阅者？我应该使用subscription2:Subscription;？和ngDestroy this.subscription2.unsubscribe();？这是真的？

Answer 1

您可以ngOnDestroy()在阵列中收集要立即取消订阅的订阅

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

A Subscription可以保存子订阅并安全地取消订阅所有订阅.此方法处理可能的错误(例如,如果任何子订阅为null).此外,如果在ngOnDestroy调用后添加任何订阅,则会立即取消订阅.

应该注意,Subscription.add()返回添加的订阅.所以链接add()喜欢subManager.add(sub1).add(sub2)将增加sub2至sub1.如果sub1在较早时间取消订阅,这将是一个问题,因为它也将取消订阅sub2.

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

        // DO NOT CHAIN add() - SEE ABOVE
        this.subManager.add(sub1);
        this.subManager.add(sub2);
    }

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

从文档:

此外,订阅可以通过add()方法组合在一起,该方法将子订阅附加到当前订阅.当订阅被取消订阅时,其所有子女(及其孙子女)也将被取消订阅.

...

如果此订阅已处于关闭状态,则将立即执行传递的拆除逻辑.