Angular组件跳转时Service重复实例化问题求助

你的ReportService已经配置了providedIn: 'root'，理论上应该是全局单例，但出现多实例的情况，大概率是以下原因导致：

1. 组件元数据中重复声明了Service #

检查你的两个组件的@Component装饰器，如果在providers数组里添加了ReportService，会导致每个组件创建自己的局部实例，覆盖全局单例。

比如如果组件代码是这样的（你的代码里未显示，但这是最常见的诱因）：

@Component({
  selector: 'app-org',
  templateUrl: './org.component.html',
  providers: [ReportService] // 这里会创建局部实例，必须删掉
})

解决方案：把两个组件@Component里的providers数组中ReportService的声明全部移除，确保全局单例生效。

2. 第二个组件的代码错误 #

你的LiquidityComponent里错误导入了Injectable装饰器，这是服务专用的，组件不需要这个导入，直接删掉即可：

// 删掉这行多余的导入
import { Injectable } from '@angular/core'; 

3. 验证单例是否生效 #

修改后，切换组件时只会弹出一次creating an instance of ReportService的提示，说明服务是单例了。此时在OrgComponent点击按钮更新消息后，切换到LiquidityComponent就能看到更新后的"New Message"。

额外优化：防止内存泄漏 #

组件订阅BehaviorSubject时，记得在组件销毁时取消订阅，避免内存泄漏。可以用takeUntil操作符：

以OrgComponent为例：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
// ...其他导入

export class OrgComponent implements OnInit, OnDestroy {
  org: Org = new Org(); 
  message: string = "";
  private destroy$ = new Subject<void>(); // 用于取消订阅

  constructor(private http: HttpClient, private reportService: ReportService) { } 

  updateMessage(){ 
    this.reportService.setMessage("New Message"); 
  } 

  ngOnInit(): void { 
    this.reportService.getMessage
      .pipe(takeUntil(this.destroy$)) // 添加管道
      .subscribe(msg => this.message = msg); 
  } 

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

LiquidityComponent也做同样的修改即可。

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