Angular 20中如何使用新inject语法替代构造函数中的@Inject(String)注入配置参数

嗨，我来帮你搞定这个Angular 20里的inject语法迁移问题～

首先得先理清一个小问题：你之前用的@Inject(String)其实是不太规范的写法，Angular里注入自定义配置参数，正确的姿势是用**InjectionToken**来定义对应的令牌，这样注入和提供值的时候类型更安全，也能避免混淆。现在要转到新的inject()语法，咱们一步步来改：

第一步：定义配置参数的注入令牌 #

先为prefix和suffix创建专门的InjectionToken，这样后续注入和提供值都有明确的标识，还能设置默认值：

// 可以单独放在一个文件里，比如translate.tokens.ts
export const TRANSLATE_PREFIX = new InjectionToken<string>('TRANSLATE_PREFIX', {
  providedIn: 'root',
  factory: () => '/assets/i18n/'
});

export const TRANSLATE_SUFFIX = new InjectionToken<string>('TRANSLATE_SUFFIX', {
  providedIn: 'root',
  factory: () => '.json'
});

第二步：改造TranslateHttpLoader类，用inject()替代构造函数注入 #

把构造函数里的参数全部去掉，换成类内的inject()调用，这样就完全符合ESLint的要求了：

import { inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { TranslateLoader } from '@ngx-translate/core';
import { TRANSLATE_PREFIX, TRANSLATE_SUFFIX } from './translate.tokens';

export class TranslateHttpLoader implements TranslateLoader {
  // 用inject()获取HttpClient实例
  private http = inject(HttpClient);
  // 注入前缀和后缀的配置值，用咱们定义好的令牌
  private prefix = inject(TRANSLATE_PREFIX);
  private suffix = inject(TRANSLATE_SUFFIX);

  getTranslation(lang: string): Observable<any> {
    return this.http.get(`${this.prefix}${lang}${this.suffix}`);
  }
}

如果你的prefix/suffix允许可选（可以不提供，用默认值兜底），还可以给inject()加第二个参数：

private prefix = inject(TRANSLATE_PREFIX, { optional: true }) || '/assets/i18n/';
private suffix = inject(TRANSLATE_SUFFIX, { optional: true }) || '.json';

第三步：更新appConfig里的提供配置 #

现在不需要在httpLoaderFactory里手动传参数了，因为类里自己会通过inject()自动获取依赖和配置：

import { ApplicationConfig, provideHttpClient } from '@angular/core';
import { provideTranslateService } from '@ngx-translate/core';
import { TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from './translate-http.loader';
import { TRANSLATE_PREFIX, TRANSLATE_SUFFIX } from './translate.tokens';

// 简化httpLoaderFactory，不需要再传任何参数
const httpLoaderFactory = () => new TranslateHttpLoader();

export const appConfig: ApplicationConfig = {
  providers: [
    provideHttpClient(),
    // 在这里提供自定义的prefix和suffix值（如果需要覆盖默认值的话）
    {
      provide: TRANSLATE_PREFIX,
      useValue: './i18n/'
    },
    {
      provide: TRANSLATE_SUFFIX,
      useValue: '.json'
    },
    provideTranslateService({
      loader: {
        provide: TranslateLoader,
        useFactory: httpLoaderFactory,
        // 现在不需要deps数组了，因为类内用inject()自动获取所有依赖
      },
    }),
  ],
};

为啥之前的@Inject(String)写法有问题？ #

你之前用的@Inject(String)其实是把原生String类型当注入令牌，但这不是Angular官方推荐的方式，很容易和其他地方注入的字符串值冲突，类型也不安全。用InjectionToken才是自定义注入值的标准做法，既能明确标识注入的是什么，又能保证类型正确。

这样改完之后，既符合Angular 20的新语法要求，又能正确注入配置参数，还不用再禁用ESLint规则啦～

内容来源于stack exchange