Ngx 翻译 shared/lazy 加载模块

Question

可能是最常见的问题之一，虽然我发现 documentation and some 试图为我解决问题，但我仍然不确定如何解决这个问题。

所以这是我的结构：

应用程序模块当然是引导的主要模块
Countryselector 模块：负责加载默认国家/地区（基于 IP）并负责根据浏览器决定使用哪种语言。它基本上是决定使用什么 country/language 的核心功能 + 它包含一个下拉菜单供用户更改 country/language。
结账模块、选择模块、支付模块均采用路由延迟加载

AppModule

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

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

国家选择器模块

@NgModule({
  declarations: [CountryselectorComponent],
  imports: [
    CommonModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    })
  ],
  exports: [
    CountryselectorComponent
  ]
})
export class ContrySelectorModule { }

选择模块：

@NgModule({
  declarations: [SelectionComponent],
  imports: [
    CommonModule,
    SelectionRoutingModule,
    UspblockModule,
    TranslateModule.forChild({//or forRoot, no idea how to configure this
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }})
  ],
})
export class SelectionModule { }

现在的问题是我不想在延迟加载模块中再次进行语言配置，因为国家/地区选择器模块已经解决了这个问题。我现在不确定如何正确配置延迟加载的模块（实际上不确定 countrySelectorModule 是否正确完成）。使用 standard github documentation 我无法做到这一点。我尝试过 .forChild()，但到目前为止运气不好。

我需要共享模块吗？我是否需要在所有地方导入 countrySelectorModule（不是首选）？自定义装载机？ t.b.h。我不知道，对于更高级的场景，文档有点短。

Answer 1

我通过执行以下操作解决了这个问题：

创建一个SharedModule，代码如下

共享模块

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

@NgModule({
  declarations: [],
  imports: [
    CommonModule,
    TranslateModule.forChild({
      loader: {
      provide: TranslateLoader,
      useFactory: HttpLoaderFactory,
      deps: [HttpClient]
    },
    isolate: false
}),
  ],
  exports: [TranslateModule],
})
export class SharedModule {

  static forRoot(): ModuleWithProviders {
    return {
      ngModule: SharedModule,
      providers: [ShoppingCartService, AccountService]
    }
  }
}

因此，这确保对于导入 SharedModule、TranslateModule 的每个模块都将使用相同的配置。确保将其导出。 forRoot() 还解决了确保 ShoppingCartService 和 AccountService 只是一个实例而不是每个惰性模块创建单独服务的问题。

更改 AppModule：

AppModule

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

由于 AppModule 是您的主要入口点，请在此处执行 forRoot() 调用 TranslateModule 和 SharedModule.

任何延迟加载的模块只需要导入 SharedModule 而无需任何方法调用。另外 CountrySelectorModule 在我的例子中必须只导入 SharedModule 而没有别的。

Ngx 翻译 shared/lazy 加载模块

Ngx translate with shared/lazy loading modules

lazy-loading

ngx-translate

angular

angular7