Angular NgModule中如何使用服务？TranslateService未识别报错

问题根源 #

你现在直接在SharedModule类外部写了setCulture(translate.currentLang);，但这里的translate既没定义，也没通过Angular的依赖注入机制获取到TranslateService的实例。Angular的依赖注入只能在模块、组件、服务这类可注入类的构造函数里，或者注入上下文内用inject()函数来拿实例，直接在类外面调用根本行不通。

另外，你在SharedModule的providers里加了TranslateService，这大概率是多余的——通常TranslateModule已经在根模块配置了全局单例的TranslateService，重复添加会创建新实例，反而导致服务状态不一致。

修正步骤 #

1. 删除providers里的TranslateService，避免多实例问题
2. 将设置文化的逻辑移到SharedModule的构造函数中，在这里注入TranslateService实例
3. 可选：监听语言切换事件，实时更新Syncfusion的文化设置

修正后的代码 #

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import * as ejsTranslation from './ejs-translations.json';
import { L10n, setCulture } from '@syncfusion/ej2-base';
import { TranslateService } from '@ngx-translate/core';
import { TranslateModule } from '@ngx-translate/core'; // 若SharedModule下的组件要用到translate指令，可添加并导出

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    TranslateModule // 也可用TranslateModule.forChild()做局部配置
  ]
})
export class SharedModule {
  constructor(private translateService: TranslateService) {
    // 初始化设置文化
    setCulture(this.translateService.currentLang);
    L10n.load(ejsTranslation);

    // 可选：监听语言变化，实时更新文化
    this.translateService.onLangChange.subscribe((event) => {
      setCulture(event.lang);
      // 若需要重新加载翻译资源，可再次调用L10n.load(ejsTranslation);
    });
  }
}

额外提醒 #

确保你的根模块（比如AppModule）已经正确配置了TranslateModule.forRoot()，示例如下：

// AppModule示例代码
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpClient } from '@angular/common/http';

export function HttpLoaderFactory(http: HttpClient) {
  return new TranslateHttpLoader(http);
}

@NgModule({
  imports: [
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ]
})
export class AppModule { }

内容的提问来源于stack exchange，提问作者Alan-A