在 Angular 7 中取消订阅 Observable 的更简单方法

Question

我有一个实现，当使用 takeUntil 销毁组件时，它会自动取消订阅 Observables。但是在很多组件中实现相同的代码很烦人。

我想知道这是否可以简化 （我不能使用 async 管道，因为我需要 Typescript 组件中的发射值）

这是我当前的实现：

export class Component implements OnDestroy {
    _dstr = new Subject();

    data$: Observable<any> = this.store.select(Selector.getData);

    constructor(
        private store: Store<State>,
    ) {
        this.store.pipe(
            select(Selector.getOtherData),
            takeUntil(this._dstr),
        ).subscribe(data => {
            console.log('here is my data!', data)
        });
    }

    public ngOnDestroy(): void {
        this._dstr.next();
        this._dstr.complete();
    }

}

Answer 1

您可以将所有订阅收集到一个数组中，然后在 ngOnDestroy 函数中取消订阅。如果您经常需要这种行为，您可以考虑使用抽象 class，您可以从中扩展所有组件，从中为您执行此操作。

import { Component, OnDestroy, OnInit } from '@angular/core';
import { Subscription, Observable, of } from 'rxjs';

export abstract class BaseComponent implements OnDestroy{
  public subscriptions: Subscription[] = [];

  public ngOnDestroy(): void {
    console.log("destroyed");
    this.subscriptions.forEach(s => s.unsubscribe());
  }
}

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent {

}

let count: number = 0;
@Component(
  {
    selector: 'app-derived',
    template: 'Derived Class'
  }
)
export class DerivedComponent extends BaseComponent implements OnInit, OnDestroy {
  private store: Observable<any> = of(count++);
  constructor() {
    super();
  }
  public ngOnInit(): void {
    this.subscriptions.push( this.store.subscribe(data => console.log(data)) );
  }
}

Blitzstack 演示：https://stackblitz.com/edit/angular-peyoac

在 Angular 7 中取消订阅 Observable 的更简单方法

Simpler Method of Unsubscribing from Observable in Angular 7

observable

typescript

ngrx

angular

angular7