时间戳

首页 > 解决方案 > 如何在 Angular 中翻译库而不在应用程序中初始化翻译服务？

angular - 如何在 Angular 中翻译库而不在应用程序中初始化翻译服务？

问题描述

我有一个名为“控件”的库文件，该库文件被其他各种应用程序使用。我正在使用 ngx-translate 进行翻译。一些使用这个库的应用程序执行翻译，而有些则不执行。我希望我的库是自给自足的，并且默认加载英语而不在应用程序中初始化翻译服务。

我的 json 文件位于文件夹中：projects->controls->src->shared->assets->i18n。

我在 controls.module.ts 中编写了以下代码，但应用程序找不到 json 文件，因此无法加载翻译。

    export function HttpLoaderFactory(handler:HttpBackend) {
        const http = new HttpClient(handler);
        return new TranslateHttpLoader(http, 'projects/controls/src/shared/assets/i18n/','.json');
    }

    @NgModule({
    imports: [
       ......
       HttpClientModule,
       TranslateModule.forRoot({
         isolate: true,
         loader: {
         provide: TranslateLoader,
         useFactory: HttpLoaderFactory,
         deps:[HttpBackend],
         }
       }),
      .......]
    exports:[ ....
      TranslateModule]
   })

    export class ControlsModule {
      constructor(private translate:TranslateService) {
         this.translate.setDefaultLang('en');
      }
   }

标签： angularlocalizationinternationalizationshared-librariesngx-translate

解决方案

TranslateHttpLoader() 中的路径可能不正确。运行时ng serve，应该可以使用您在此处指定的路径在浏览器上访问翻译文件。如果文件可在 处访问http://localhost:<PORT>/shared/assets/i18n/en.json，请尝试以下操作 -

export function HttpLoaderFactory(http: HttpClient) {
    return new TranslateHttpLoader(http, './shared/assets/i18n/');
}

此外，您可以在导入模块时设置默认语言。

imports: [
  ...
  TranslateModule.forRoot({
    loader: {
    provide: TranslateLoader,
    useFactory: HttpLoaderFactory,
    deps: [HttpClient]
  },
  defaultLanguage: 'en'
 })
]

推荐阅读