以角度取消订阅 Observable - TypeScript

在使用 Observable 时，我们常常需要订阅（subscribe）一个 Observable 来接收它发出的数据，但有时我们需要在不再需要数据的情况下取消订阅。

取消订阅通常是在组件被销毁时发生的，以避免内存泄漏。在 Angular 中，我们可以使用 ngOnDestory 生命周期钩子来取消订阅，但在纯 TypeScript 中，我们需要手动取消订阅。下面是几种取消订阅的方法。

方法一 - 使用 Subscription 对象

在订阅时，我们可以将 Observable 与 Subscription 对象关联起来，然后在不需要数据时使用 unsubscribe() 方法取消订阅。

import { Observable, Subscription } from 'rxjs';

const myObservable = new Observable(observer => {
  // emit some data here
});

const mySubscription = myObservable.subscribe(data => {
  // handle the emitted data here
});

// unsubscribe when the component is destroyed, for example
mySubscription.unsubscribe();

方法二 - 使用 takeUntil 操作符

我们还可以使用 takeUntil 操作符来取消订阅。这个操作符会源源不断地发射 Observable 中的数据，直到另一个 Observable 发出数据为止。我们可以将组件销毁的行为封装成一个 Observable（通常是 Subject），然后将这个 Observable 与 takeUntil 操作符一起使用。

import { Observable, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

const destroy$ = new Subject();

const myObservable = new Observable(observer => {
  // emit some data here
});

myObservable.pipe(
  takeUntil(destroy$)
).subscribe(data => {
  // handle the emitted data here
});

// emit data to destroy the observable
destroy$.next();
destroy$.complete();

方法三 - 使用 ngOnDestroy 生命周期钩子

在 Angular 应用中，我们可以在组件的 ngOnDestroy 生命周期钩子中取消订阅。ngOnDestroy 生命周期钩子在组件销毁时触发，因此我们可以在这里完成取消订阅的工作。

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

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponent implements OnInit, OnDestroy {
  private myObservable: Observable<any>;
  private mySubscription: any;

  constructor() { }

  ngOnInit(): void {
    this.myObservable = new Observable(observer => {
      // emit some data here
    });

    this.mySubscription = this.myObservable.subscribe(data => {
      // handle the emitted data here
    });
  }

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

以上是三种常用的方法来取消订阅 Observable。在使用时，我们需要根据具体情况选择合适的方法。