懒惰模块中的Angular ngx翻译不起作用

Question

我创建了一个包含翻译模块并加载文件的库：

@NgModule({
  imports: [
    MatMomentDateModule,
    TranslateModule.forRoot
    ({

        loader: {
          provide: TranslateLoader,
          useFactory: TranslateFactory,
          deps: [HttpClient]
       }
      }),
    ],
  exports: [TranslateModule],
})

在我的应用程序中，我导入了这个库并加载了应用程序的翻译文件

@NgModule({
  declarations: [
    AppComponent,
    MyLayout
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MyLibWithTranslation,
    TranslateModule.forChild({
     extend: true,
     loader: {
      provide: TranslateLoader,
      useFactory: TranslateFactory,
      deps: [HttpClient]
     }
    }),
    ....

然后，此应用程序包含加载延迟加载的模块，在这些模块中，我再次导入我的 lib 以拥有 TranslateService

@NgModule({
  declarations: [MyComponent],
  imports: [
    CommonModule,
    LazyModuleRoutingModule,
    MyLibWithTranslation
  ]
})
export class MyLazyModule { }

我的问题是，在我的模块中，我只有来自 MyLibWithTranslation 的翻译负载。我没有从 AppModule 加载的翻译。

Answer 1

这里有几个解决方案

首先你可以使用

ngx-translate-multi-http-loader

AoT 需要工厂的导出函数

export function HttpLoaderFactory(http: HttpClient) { return new
MultiTranslateHttpLoader(http, [
    {prefix: "./assets/translate/core/", suffix: ".json"},
    {prefix: "./assets/translate/shared/", suffix: ".json"}, ]);


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

其次是创造

在您的共享模块中像这样导入和导出

不使用 forChild 或 forRoot

imports: [
    TranslateModule
  ],
  exports: [
   TranslateModule
  ], 

在您的应用程序模块中导入 forRoot

imports:[
TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: createTranslateLoader,
        deps: [HttpClient]
      },
      isolate: true
    })
]