Angular 8 内存泄漏，添加越来越多的订阅

Question

问题：

我的应用在我加载的第一个组件上运行良好，当我点击切换到另一个组件时，它会在 My DAL 上创建另一个订阅。

代码

servers.component.html

<div class="row">
  <div class="col-md-12">
    <app-server-list></app-server-list>
  </div>
  <router-outlet></router-outlet>
</div>

服务器备份.component.html

<div class="row">
  <div class="col-md-12">
    <app-server-list ></app-server-list>
  </div>
</div>

在 server-list.component.ts 中，我想每 5 秒刷新一次数据库中的数据，所以我这样做：

this.dataStorageService.getServerPerformanceInfo()
this.interval = setInterval(() =>
{
  this.dataStorageService.getServerPerformanceInfo()
} , 5000)

当我在服务器和服务器备份之间切换时，我取消订阅：

ngOnDestroy()
{

  this.subscriptions.forEach(subscription => {
    subscription.unsubscribe();  
  });
 clearInterval(this.interval);

}

最后在我的 data-storage-service.ts 上

getServerPerformanceInfo()
{
  this.serverPerfSub = this.http.get<ServerPerformance[]>(DEV + '/getServerPerformance').subscribe
  (
    (data) => {
      this.serversService.setPerformanceInfo(data);
    }
  )
}

当我在我的组件之间切换时，服务器列表组件被销毁、创建，但 dataStorageService 调用变得越来越频繁，直到我的 API 方法开始失败。

这肯定与 dataStorageService 上的订阅有关，但我该如何清理呢？

Answer 1

Javascript

您需要清除您的setInterval。

interval: number;

ngOnInit() {
  this.dataStorageService.getServerPerformanceInfo()
  this.interval = setInterval(() => {
    this.dataStorageService.getServerPerformanceInfo();
  } , 5000);
}

ngOnDestroy() {
  clearInterval(this.interval);
}

RxJS

这可以使用 javascript 完成，但我建议使用 RxJS interval，因为您已经在处理 observables。

既然你想立即调用它，你最好使用 RxJS timer。

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

private destroyed$ = new Subject();

ngOnInit() {
  // start the timer and initiate the observable immediately.
  // then emit a value every 5 seconds
  timer(0, 5000).pipe(
    // unsubscribe on ngOnDestroy
    takeUntil(this.destroyed$)
  ).subscribe(() => {
    // TODO: catch errors in data storage service
    this.dataStorageService.getServerPerformanceInfo();
  });
}

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

将订阅从您的服务中移出

不过，我建议您将订阅从您的服务中移出。您仍然可以在 tap 运算符中执行该操作。您可以在组件中使用switchMap 将服务调用链接到您的timer。

数据存储服务.ts

getServerPerformanceInfo(): Observable<any> {
  const url = DEV + '/getServerPerformance';
  return this.http.get<ServerPerformance[]>(url).pipe(
    tap((data) => this.serversService.setPerformanceInfo(data))    
  );
}

组件.ts

ngOnInit() {
  timer(0, 5000).pipe(
    takeUntil(this.destroyed$),
    switchMap(() => this.dataStorageService.getServerPerformanceInfo()),
    catchError(error => of('An error has occured'))
  ).subscribe(() => {
    // TODO: Something?
  });
}

如果您想捕获错误，可以使用catchError 在管道中捕获它们。我建议尽可能靠近源捕获它们 - 最好在 http 请求之后不久。