Angular中如何将服务注入常量？实现遇阻寻求解决方案

这个问题我之前也碰到过，核心问题在于你手动实例化UserService完全绕开了Angular的依赖注入系统——UserService的构造函数需要SomeOtherService，但直接new UserService()时没法自动注入这个依赖，而且这种方式创建的服务实例也不是DI容器管理的单例，后续很容易出现状态不一致的问题。

下面给你两种可行的解决方案，根据你的getUsername()是同步还是异步场景选择：

方案一：如果getUsername()是同步方法 #

我们可以用InjectionToken来提供配置，结合DI容器自动注入UserService来获取值：

1. 先确保UserService是可注入的：

import { Injectable } from '@angular/core';
import { SomeOtherService } from './some-other.service';

@Injectable({
  providedIn: 'root' // 让Angular自动管理这个服务的单例
})
export class UserService {
  constructor(private someOtherService: SomeOtherService) {}

  getUsername(): string {
    return this.someOtherService.getDetails('some/url'); // 假设这里返回同步字符串
  }
}

2. 创建一个InjectionToken来定义你的配置：

import { InjectionToken } from '@angular/core';

export const USER_CONFIG = new InjectionToken<{ username: string }>('用户配置');

3. 在模块中配置USER_CONFIG的提供者，依赖UserService获取值：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UserService } from './user.service';
import { USER_CONFIG } from './user-config';

@NgModule({
  imports: [BrowserModule],
  providers: [
    {
      provide: USER_CONFIG,
      useFactory: (userService: UserService) => ({
        username: userService.getUsername()
      }),
      deps: [UserService] // 告诉DI容器需要注入UserService
    }
  ]
})
export class AppModule {}

4. 在组件或服务中使用这个配置：

import { Component, Inject } from '@angular/core';
import { USER_CONFIG } from './user-config';

@Component({
  selector: 'app-root',
  template: `<p>当前用户名：{{ userConfig.username }}</p>`
})
export class AppComponent {
  constructor(@Inject(USER_CONFIG) public userConfig: { username: string }) {}
}

方案二：如果getUsername()是异步方法（比如HTTP请求） #

这种情况需要确保配置在应用启动前加载完成，我们可以用APP_INITIALIZER来实现：

1. 先创建一个配置服务来存储加载后的配置：

import { Injectable } from '@angular/core';
import { UserService } from './user.service';

@Injectable({ providedIn: 'root' })
export class ConfigService {
  userConfig: { username: string } | null = null;

  constructor(private userService: UserService) {}

  // 加载配置的异步方法
  loadConfig(): Promise<void> {
    return this.userService.getUsername() // 假设这里返回Promise<string>
      .then(username => {
        this.userConfig = { username };
      });
  }
}

2. 在模块中配置APP_INITIALIZER，让应用启动前先加载配置：

import { NgModule, APP_INITIALIZER } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ConfigService } from './config.service';

// 初始化函数，返回一个Promise让Angular等待配置加载完成
function initializeApp(configService: ConfigService) {
  return () => configService.loadConfig();
}

@NgModule({
  imports: [BrowserModule],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: initializeApp,
      deps: [ConfigService],
      multi: true // 允许多个初始化器
    }
  ]
})
export class AppModule {}

3. 在组件中使用配置服务：

import { Component } from '@angular/core';
import { ConfigService } from './config.service';

@Component({
  selector: 'app-root',
  template: `<p>当前用户名：{{ configService.userConfig?.username }}</p>`
})
export class AppComponent {
  constructor(public configService: ConfigService) {}
}

为什么你的原代码不行？ #

• 手动new UserService()时，Angular的DI容器不会帮你注入SomeOtherService，会直接抛出缺少依赖的错误；
• 即使你手动传入new SomeOtherService()，也会创建一个非单例的服务实例，和DI容器管理的实例状态不一致，后续业务逻辑容易出问题。

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