Angular 5中Observable被多次调用问题求助

这个问题在Angular开发里太常见了——本质是订阅泄漏：你的BreadcrumService是单例服务，里面的Subject会一直存在；而每次组件初始化时，你都会执行一次subscribe，但没有在组件销毁时取消这些旧订阅。随着组件被多次创建（比如路由跳转后返回、组件被复用），订阅会越积越多，触发事件时所有历史订阅都会执行，就出现了多次调用的情况。

下面给你几个实用的解决方案，按推荐程度排序：

方案1：使用takeUntil操作符（最推荐） #

这是Angular社区公认的优雅方案，通过一个"销毁信号"的Subject来自动取消所有订阅，适合组件有多个订阅的场景。

修改后的组件代码：

import { Component, OnChanges, OnDestroy, OnInit } from '@angular/core';
import { Subject, takeUntil } from 'rxjs';
import { BreadcrumService } from './breadcrum.service';

export class YourComponent implements OnChanges, OnDestroy {
  // 定义销毁信号Subject
  private destroy$ = new Subject<void>();

  constructor(private breadcrumService: BreadcrumService){}

  ngOnInit() { // 也可以在ngOnChanges里，根据你的业务场景调整
    this.breadcrumService.invokeEvent$
      .pipe(takeUntil(this.destroy$)) // 加上这个操作符自动管理订阅
      .subscribe((data) => {
        // 现在只会执行一次了
      });
  }

  // 组件销毁时发送销毁信号
  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

方案2：手动取消订阅 #

如果只有单个订阅，也可以直接保存Subscription对象，在组件销毁时手动取消。

修改后的组件代码：

import { Component, OnChanges, OnDestroy, OnInit } from '@angular/core';
import { Subscription } from 'rxjs';
import { BreadcrumService } from './breadcrum.service';

export class YourComponent implements OnChanges, OnDestroy {
  // 保存订阅实例
  private eventSubscription!: Subscription;

  constructor(private breadcrumService: BreadcrumService){}

  ngOnInit() {
    this.eventSubscription = this.breadcrumService.invokeEvent$
      .subscribe((data) => {
        // 处理逻辑
      });
  }

  ngOnDestroy() {
    // 组件销毁时取消订阅
    if(this.eventSubscription) {
      this.eventSubscription.unsubscribe();
    }
  }
}

方案3：使用async管道（适合模板绑定场景） #

如果你的订阅结果是要在模板里展示的，可以把Observable赋值给组件属性，然后用Angular的async管道，它会自动帮你管理订阅的创建和销毁，不用手动处理。

示例：

// 组件类
export class YourComponent implements OnChanges {
  eventData$ = this.breadcrumService.invokeEvent$;

  constructor(private breadcrumService: BreadcrumService){}
}

<!-- 模板 -->
<div *ngIf="eventData$ | async as data">
  <!-- 这里直接使用data即可 -->
</div>

另外补充个小建议：如果你的业务需要新订阅者能拿到最新的一次事件值，可以把Subject换成BehaviorSubject；如果不需要保留历史值，当前的Subject就足够啦~

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