多模块共享组件上未加载翻译 - Angular 5

Question

我有以下问题。我使用 Angular 5 创建了多模块项目，并希望为延迟加载的模块动态加载翻译。假设我的结构是这样的：

app
 ->app.module.ts
 ->shared-components
  ->shared.components.module.ts and components
 ->lazy-loaded-module1.ts
 ->lazy-loaded-module2.ts

现在我在 app.module.ts 和 shared.components.module.ts 之间共享了 app.translation.module.ts，所以我的 app.translation.module 看起来像这样：

export function createTranslateLoader(http: HttpClient) {
  return new TranslateHttpLoader(http, './assets/i18n/core/', '.json');
}

const translationOptions = {
  loader: {
    provide: TranslateLoader,
    useFactory: (createTranslateLoader),
    deps: [HttpClient],
    isolate: true
  }
};

@NgModule({
  imports: [TranslateModule.forRoot(translationOptions)],
  exports: [TranslateModule],
  providers: [TranslateService]
})
export class AppTranslationModule {
}

当我想在一个延迟加载的模块中使用共享组件中的组件时，问题就开始了（它们有自己的 TranslationModule.forChild() 翻译）。似乎共享组件不再使用自己的翻译模块并开始使用其中一个父模块，在我看来这是不可接受的，因为我必须在所有使用共享组件的模块之间克隆翻译，这使得它根本不可用。我做错了什么吗？什么应该是正确的配置？

Answer 1

制作一个导入翻译模块的 SharedModule 并将该 SharedModule 导入 SharedComponentModule。 一个例子：

SharedModule.ts

import { TranslateModule } from '@ngx-translate/core';    
@NgModule({
   exports: [
       TranslateModule,
   ],
providers: [],
})
export class SharedModule { }

SharedComponentModule.ts

@NgModule({
imports: [
       SharedModule
   ],
})
export class SharedComponentModule { }