Angular 18中如何为Report服务提供专属DataLoader服务实例？

核心思路 #

通过**注入令牌（InjectionToken）**区分不同用途的DataLoader实例，精准控制Report服务和组件各自使用的专属实例，彻底解决状态共享导致的污染问题。

步骤1：定义注入令牌 #

创建两个令牌，分别标记Report专属的DataLoader和组件自用的DataLoader：

import { InjectionToken } from '@angular/core';
import { DataLoader } from './data-loader.service';

// Report专属DataLoader的注入令牌
export const REPORT_DATA_LOADER = new InjectionToken<DataLoader>('Report-specific DataLoader');
// 组件专属DataLoader的注入令牌
export const COMPONENT_DATA_LOADER = new InjectionToken<DataLoader>('Component-specific DataLoader');

步骤2：配置实例提供者 #

在模块或组件的providers数组中，为每个令牌绑定独立的DataLoader实例，并配置Report服务注入其专属实例：

// 示例：在组件的providers中配置（全局生效可放在模块providers里）
@Component({
  selector: 'app-target-component',
  templateUrl: './target-component.component.html',
  styleUrls: ['./target-component.component.css'],
  providers: [
    // 为Report创建专属DataLoader实例
    { provide: REPORT_DATA_LOADER, useClass: DataLoader },
    // 为组件创建独立的DataLoader实例
    { provide: COMPONENT_DATA_LOADER, useClass: DataLoader },
    // 配置Report服务，注入它专属的DataLoader
    {
      provide: Report,
      useFactory: (reportLoader: DataLoader) => new Report(reportLoader),
      deps: [REPORT_DATA_LOADER]
    }
  ]
})

步骤3：修改服务与组件的注入逻辑 #

修改Report服务 #

用@Inject()指定注入Report专属的DataLoader令牌：

import { Injectable, Inject } from '@angular/core';
import { DataLoader } from './data-loader.service';
import { REPORT_DATA_LOADER } from './tokens';

@Injectable()
export class Report {
  constructor(@Inject(REPORT_DATA_LOADER) private dataLoader: DataLoader) {}

  // 业务方法示例：
  generateReport() {
    const data = this.dataLoader.loadData();
    // 处理数据生成报告
  }
}

修改组件 #

注入组件专属的DataLoader实例，同时直接使用已配置好的Report服务（它自带专属的DataLoader）：

import { Component, Inject } from '@angular/core';
import { DataLoader } from './data-loader.service';
import { Report } from './report.service';
import { COMPONENT_DATA_LOADER } from './tokens';

export class TargetComponent {
  constructor(
    // 组件自己的DataLoader实例
    @Inject(COMPONENT_DATA_LOADER) private componentLoader: DataLoader,
    // Report服务（已绑定专属DataLoader）
    private reportService: Report
  ) {}

  // 组件业务示例：
  loadComponentData() {
    const componentData = this.componentLoader.loadData();
    // 组件自用数据处理
  }

  generateComponentReport() {
    this.reportService.generateReport(); // 使用Report专属的DataLoader数据
  }
}

备选方案：使用providedIn: 'any'（Angular 9+） #

如果不需要区分不同用途的实例，只是希望每次注入都生成新的DataLoader，可以直接修改DataLoader的装饰器：

@Injectable({
  providedIn: 'any' // 每次注入都会创建新实例
})
export class DataLoader {
  // ... 服务逻辑
}

这种方式简单，但无法精确控制哪些地方用单例、哪些地方用新实例，适合所有场景都需要独立实例的情况。

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