Angular 在使用路由时不释放组件？

Question

我有一个使用路由来显示各种页面的应用程序。我遇到了一些严重的内存泄漏问题，应用程序将逐渐（或快速！）吞噬 RAM，直到浏览器退出。

我与另一位开发人员合作，他注意到创建的组件在路由到另一个组件时似乎没有被释放。这是一个必须以某种方式考虑的角度路由问题吗？

请注意，在这个“最小复制”中，单击一个，然后单击另一个后，组件 1 和组件 2 都位于堆快照中。

Answer 1

我在下面添加了示例

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

@Component({
  // ...
})
export class MyComponent implements OnDestroy {
  private unsubscribe$ = new Subject<void>();

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

  fetchData() {
    someObservable.pipe(
      takeUntil(this.unsubscribe$)
    ).subscribe(data => {
      // Handle data
    });
  }
}