Angular页面存在多个相同组件时如何避免service被重复调用

核心思路是利用Angular根单例服务的特性，在服务内部做请求缓存，全程不需要父组件参与数据逻辑，子组件各自正常调用服务方法即可自动复用请求结果，完全不会重复发起服务端请求。

具体实现步骤 #

• 确保你的数据服务是全局单例：默认使用Angular CLI生成的服务自带providedIn: 'root'配置，只要你没有在任何父/子组件的providers数组中单独声明这个服务，就会保持全局单例的状态。
• 在服务内部增加缓存逻辑，推荐直接缓存请求的Observable对象，避免两个组件同时触发请求时的竞态问题，示例代码如下：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { shareReplay } from 'rxjs/operators';

// 自行定义你的数据结构类型
interface YourDataType {}

@Injectable({
  providedIn: 'root'
})
export class YourDataService {
  // 存储缓存的请求Observable
  private cachedData$: Observable<YourDataType> | null = null;

  constructor(private http: HttpClient) {}

  getTargetData(): Observable<YourDataType> {
    // 已有缓存直接返回缓存的Observable，不需要重复发请求
    if (this.cachedData$) {
      return this.cachedData$;
    }
    // 首次请求用shareReplay操作符缓存结果，后续订阅直接拿到已有结果
    this.cachedData$ = this.http.get<YourDataType>('你的服务端接口地址').pipe(
      shareReplay(1)
    );
    return this.cachedData$;
  }

  // 可选：如果后续需要手动刷新数据，提供清空缓存的方法
  resetCache(): void {
    this.cachedData$ = null;
  }
}

• 两个子组件内部正常调用服务的getTargetData()方法订阅数据即可，不管多少个组件调用该方法，都只会触发一次服务端请求。

注意：不要在任意组件的providers配置项中声明该数据服务，否则会创建组件级的独立服务实例，缓存会直接失效。

方案优势 #

• 完全符合你的架构诉求：所有数据逻辑都收敛在服务内部，父组件不需要做任何数据传递、不需要感知子组件的业务逻辑
• 天然解决竞态问题：就算两个组件几乎同时发起数据请求，第二个请求也会直接复用第一个还在pending状态的Observable，不会重复发请求
• 扩展性强：如果需要设置缓存过期时间、主动刷新数据等逻辑，都可以在服务内部完成，上层组件不需要做任何修改
• 没有冗余的组件通信逻辑，不需要处理输入输出、事件总线等额外的适配成本

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