Angular/RxJS中取消Subscription订阅的其他方法及统一实现问询

给你几个实用的统一处理方案，不用在每个组件里重复写unsubscribe逻辑：

1. 抽象基类统一管理订阅 #

创建一个抽象基类，把订阅管理的逻辑封装进去，所有需要处理订阅的组件都继承这个基类即可：

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

export abstract class BaseComponent implements OnDestroy {
  private subscriptions = new Subscription();

  protected addSubscription(sub: Subscription): void {
    this.subscriptions.add(sub);
  }

  ngOnDestroy(): void {
    this.subscriptions.unsubscribe();
  }
}

组件里使用时，只需要继承基类，把订阅通过addSubscription方法添加进去：

import { Component } from '@angular/core';
import { BaseComponent } from './base.component';
import { SomeService } from './some.service';

@Component({
  selector: 'app-example',
  template: '<p>Example Component</p>'
})
export class ExampleComponent extends BaseComponent {
  constructor(private someService: SomeService) {
    super();
    const sub = this.someService.getData().subscribe(data => {
      // 处理数据
    });
    this.addSubscription(sub);
  }
}

2. takeUntil操作符结合基类（推荐） #

这种方式更灵活，能精准控制每个订阅的生命周期，还能避免基类继承可能带来的耦合问题：

import { Component, OnDestroy } from '@angular/core';
import { Subject } from 'rxjs';

export abstract class BaseComponent implements OnDestroy {
  protected destroy$ = new Subject<void>();

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

组件中订阅时，通过takeUntil操作符绑定到destroy$，组件销毁时自动取消订阅：

import { Component } from '@angular/core';
import { BaseComponent } from './base.component';
import { SomeService } from './some.service';
import { takeUntil } from 'rxjs/operators';

@Component({
  selector: 'app-example',
  template: '<p>Example Component</p>'
})
export class ExampleComponent extends BaseComponent {
  constructor(private someService: SomeService) {
    super();
    this.someService.getData()
      .pipe(takeUntil(this.destroy$))
      .subscribe(data => {
        // 处理数据
      });
  }
}

3. 使用Angular Async管道（无需手动管理） #

如果订阅的数据是直接在模板中展示的，完全可以用Async管道，Angular会自动在组件销毁时取消订阅，连代码都不用写：

组件类里只需要暴露Observable：

import { Component } from '@angular/core';
import { SomeService } from './some.service';

@Component({
  selector: 'app-example',
  template: '<p>{{ data$ | async }}</p>'
})
export class ExampleComponent {
  data$ = this.someService.getData();

  constructor(private someService: SomeService) {}
}

内容的提问来源于stack exchange，提问作者Alex