使用@Inject()注入带参数Angular服务时遇NullInjectorError求助

问题背景 #

我查阅了多个相关主题的帖子，但仍有疏漏。核心需求是实现一个需要参数的Injectable服务，了解到可通过@Inject装饰器实现，但尝试后出现报错。

代码示例 #

test-service.service.ts #

import { Inject, Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class TestService {
  constructor(@Inject('arg1') public arg1: string) {}
}

test-component.component.ts #

import { Component } from '@angular/core';
import { TestService } from './test-service.service';

@Component({
  selector: 'app-test-component',
  standalone: true,
  imports: [],
  template: `<span>{{testService.arg1}}</span>`,
  providers: [
    {
      provide: 'arg1',
      useValue: 'value1',
    },
  ],
})
export class TestComponent {
  constructor(public testService: TestService) {}
}

报错信息 #

ERROR
Error: R3InjectorError(Environment Injector)[TestService -> arg1 -> arg1]:
NullInjectorError: No provider for arg1!

解决方案 #

原因分析 #

TestService通过providedIn: 'root'注册在根注入器，但你在组件的providers中声明的arg1属于组件注入器。Angular的注入器是分层的，根注入器无法访问子层（组件注入器）的依赖，所以找不到arg1的提供者。

方案一：将服务注册到组件注入器 #

修改组件的providers数组，把TestService也加入其中，让它使用组件注入器的依赖：

import { Component } from '@angular/core';
import { TestService } from './test-service.service';

@Component({
  selector: 'app-test-component',
  standalone: true,
  imports: [],
  template: `<span>{{testService.arg1}}</span>`,
  providers: [
    {
      provide: 'arg1',
      useValue: 'value1',
    },
    TestService // 将服务添加到组件providers
  ],
})
export class TestComponent {
  constructor(public testService: TestService) {}
}

此时可选择移除TestService中的providedIn: 'root'，或保留（组件级注册会覆盖根级注册）。

方案二：将参数提供者注册到根注入器 #

如果需要保持TestService在根注入器的注册，就把arg1的提供者也加到根注入器中：

方式1：在根组件中声明

// 示例：app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [],
  template: '<app-test-component></app-test-component>',
  providers: [
    { provide: 'arg1', useValue: 'value1' } // 根级注册参数
  ]
})
export class AppComponent {}

方式2：在bootstrap时配置

// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, {
  providers: [
    { provide: 'arg1', useValue: 'value1' } // 根注入器添加参数提供者
  ]
});

这样根注入器就能找到arg1的依赖，TestService初始化时就能获取到参数。

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