Question

我正在尝试使应用程序组件和lib组件的翻译工作正常进行。目前，我只能使app或lib组件正常工作，而不能同时工作。

结构：

使用家庭组件创建了一个离子应用程序
使用登录组件创建“ features / ui”库
使用翻译组件创建了一个“核心/本地化”库（我在这里有翻译文件，在angular.json中，我将文件复制到了应用程序中）

如果我在libs / features / ui / ui.module.ts中添加导入TranslateModule和提供程序，则可以使应用程序中的home组件正常工作

@NgModule({
  imports: [
    ReactiveFormsModule,
    FormsModule,
    CommonModule,
    ToastrModule.forRoot(),
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: createTranslateLoader,
        deps: [HttpClient]
     }
})],
providers: [
  {
      provide: APP_INITIALIZER,
      useFactory: appInitializerFactory,
      deps: [TranslateService, Injector],
      multi: true
  }
],
declarations: [LoginComponent],
exports: [
  LoginComponent
]
})

现在登录的翻译有效，但是home组件只写出了翻译键“ home.greet”

如果我改为在libs / core / core.module.ts中添加相同的导入TranslateModule和提供程序，我也可以使应用程序中的登录组件正常工作

如果我将代码同时添加到两个不同的位置，则登录名只会翻译，但是home组件再次只写出翻译键“ home.greet”

同样，将其初始化两次似乎是错误的，所以我应该在哪里放置翻译的导入和提供者，以及如何在两个地方都进行翻译？

Answer 1

我可以按照以下步骤解决相同的问题：

在lib-> feature-> src-> assets-> i18n文件夹中维护特定于lib的翻译。
使用以下命令更新angular.json app-> architec-> build-> options-> assets

{ “ input”：“库/功能/ src /资产/ i18n”， “ glob”：“ * .json”， “输出”：“资产/ i18n /功能” }
更新Lib-> feature.module中的Child（）翻译模块

TranslateModule.forChild({
          loader: {
            provide: TranslateLoader,
            useFactory: (http: HttpClient) => {
              return new TranslateHttpLoader(
                http,
                `${environment.i18nPrefix}/assets/i18n/feature/`,
                '.json'
              );
            },
            deps: [HttpClient]
          },
          isolate: true
        })

在功能模块中触发以下效果

 setTranslateServiceLanguage$ = createEffect(
    () =>
      this.store.pipe(
        select(selectSettingsLanguage),
        distinctUntilChanged(),
        tap(language => this.translateService.use(language))
      ),
    { dispatch: false }
  );

感谢tomastrajan的以下回购协议 https://github.com/tomastrajan/angular-ngrx-material-starter

获取NGX转换以在NX工作区库中工作

1 个答案: