Angular 自动取消订阅：释放内存，优化性能

2023-11-22 07:45:46

在 Angular 应用程序中，自动取消订阅是一个非常重要的技巧，可以帮助您管理资源并防止内存泄漏。

在 Angular 中，订阅可观察对象或事件时，您需要手动取消订阅。如果您忘记这样做，那么该订阅将一直保持活动状态，即使您不再需要它。这会导致内存泄漏，因为 Angular 将继续跟踪该订阅，即使它不再被使用。

Angular 提供了多种方法来帮助您管理订阅。您可以使用 takeUntil() 运算符或 async 管道。

// 使用 takeUntil() 运算符
const subscription = observable$.pipe(takeUntil(unsubscribe$)).subscribe();

// 使用 async 管道
<ng-container *ngIf="observable$ | async as value">
  {{ value }}
</ng-container>

这两种方法都会在组件被销毁时自动取消订阅。

如果您正在使用 Angular Material，那么您还可以使用 cdkUnsubscribe() 方法。

import { Component, OnDestroy } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import { MatSnackBar } from '@angular/material/snack-bar';

@Component({
  selector: 'my-component',
  template: '<button (click)="openSnackBar()">Open snackbar</button>'
})
export class MyComponent implements OnDestroy {
  private unsubscribe$ = new Subject<void>();

  constructor(private snackBar: MatSnackBar) {}

  openSnackBar() {
    this.snackBar.open('Hello, world!', 'Close', {
      duration: 2000,
    }).afterDismissed().pipe(takeUntil(this.unsubscribe$)).subscribe(() => {
      console.log('The snackbar was dismissed');
    });
  }

  ngOnDestroy() {
    this.unsubscribe$.next();
    this.unsubscribe$.complete();
  }
}