Как внедрить сервис вне объявления компонента - PullRequest
Новая
       13

Как внедрить сервис вне объявления компонента

0 голосов
/ 23 января 2019

Я работаю над проектом Angular 7 и использую библиотеку ngx-translate для локализации и интернационализации. Я сталкиваюсь с проблемой при динамическом введении поставщиков.

У меня есть простой компонент формы, который включает в себя средство выбора даты. Я использую библиотеку ng-bootstrap для компонентов Bootstrap 4. Компонент Datepicker позволяет нам внедрять календарь и провайдеров i18n для локализации средства выбора. Например: 

@Component({
  ...
  providers: [
    { provide: NgbCalendar, useClass: NgbCalendarPersian },
    { provide: NgbDatepickerI18n, useClass: NgbDatepickerI18nPersian } 
  ]
  ...
})

Теперь проблема в том, что я хочу предоставить эти классы ТОЛЬКО , если текущий язык - fa (фарси). Я пытался использовать фабрики, это не помогло. Например: 

export function NgbCalendarFactory(translate: TranslateService) {
  let lang = translate.currentLang;
  if (lang == 'fa')
    return new NgbCalendarPersian();
  else
    return new NgbCalendarGregorian();
}

export function NgbDatepickerFactory(translate: TranslateService) {
  let lang = translate.currentLang;
  if (lang == 'fa')
    return new NgbDatepickerI18nPersian();
  else
    return new NgbDatePickerI18nDefault();
}

@Component({
  ...
  providers: [
    { provide: NgbCalendar, useFactory: NgbCalendarFactory, deps: [TranslateService] },
    { provide: NgbDatepickerI18n, useFactory: NgbDatepickerFactory, deps: [TranslateService] }
  ]
  ...
})

Кажется, что фабрики - путь, но классы по умолчанию не могут быть разрешены. Классы NgbDatePickerI18nDefault и NgbCalendarGregorian генерируют ошибки времени компиляции, и они также были правильно импортированы. Понятия не имею.

Я боролся с этим часами. Один из способов решения этой проблемы - проверить текущий язык и только при необходимости предоставить эти экземпляры. Что-то нравится это: 

@Component({
  ...
  providers: currentLang == 'fa' ? [
    { provide: NgbCalendar, useFactory: NgbCalendarFactory, deps: [TranslateService] },
    { provide: NgbDatepickerI18n, useFactory: NgbDatepickerFactory, deps: [TranslateService] }
  ] : []
  ...
})

Так, если текущий язык, например, en , я оставлю массив провайдеров пустым для этого компонента. Теперь, как я могу внедрить TranslateService в моем файле машинописного текста вне объявления компонента? Очевидно, что я не могу внедрить его в конструктор класса или вручную, используя сервисы Injector или ReflectiveInjector, потому что мне нужно проверять язык во время объявления компонента.

Я немного новичок в Angular 7, так что, возможно, я думаю, что все это неправильно. Пожалуйста, ответьте с рабочими примерами или полезными ссылками, очень благодарны.

...