Ngx перевод с общими / ленивыми загрузочными модулями - PullRequest
Новая
       43

Ngx перевод с общими / ленивыми загрузочными модулями

0 голосов
/ 21 ноября 2018

Вероятно, это один из самых распространенных вопросов, в то время как документация и некоторые другие вопросы я обнаружил, пытаясь прояснить ситуацию для меня, но я все еще не уверен, как это исправить.

Итак, это моя структура:

enter image description here

  • Модуль приложения, конечно, является основным модулем, который загружается
  • Модуль Countryselector: заботится о загрузке страны по умолчанию (на основе IP) и заботится о том, какой язык использовать на основе браузера.По сути, это основная функциональность решения о том, какая страна / язык используется + в нем есть раскрывающийся список, позволяющий пользователю изменить страну / язык.
  • Модуль проверки, модуль выбора, модуль оплаты - все они загружены маршрутизацией.

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 { }

CountrySelectorModule 

@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).Используя стандартную документацию github я не смог это осуществить.Я пытался возиться с .forChild(), но пока не повезло.

Нужен ли мне модуль общего доступа?Нужно ли импортировать countrySelectorModule везде (не предпочтительно)?Кастомный загрузчик?Я понятия не имею, и документация немного более коротка для более сложных сценариев.

1 Ответ

0 голосов
/ 26 ноября 2018

Я решил это, выполнив следующее:

  1. Создайте CoreModule (в основном общий модуль) с кодом ниже

CoreModule 

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 CoreModule {

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

Таким образом, это гарантирует, что для каждого модуля, который импортирует CoreModule, TranslateModule будет использовать одну и ту же конфигурацию.Обязательно экспортируйте его.forRoot() также решил, что ShoppingCartService и AccountService - это только один экземпляр, а не каждый ленивый модуль, создающий отдельный сервис.

Изменить AppModule:

AppModule 

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

  ],
  providers: [    ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Поскольку AppModule является вашей основной точкой входа, позвоните forRoot() здесь, чтобы TranslateModule

Любой лениво загруженный модуль просто должен импортировать CoreModule без каких-либо вызовов методов.Также CountrySelectorModule в моем примере должен просто импортировать CoreModule и ничего больше.
...