Question

我正在研究 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 ，我将为该组件保留providers数组为空。现在如何在组件声明之外的打字稿文件中注入 TranslateService ？显然，我无法将其注入类构造函数中，也无法使用Injector或ReflectiveInjector服务手动注入，因为我需要在组件声明时检查语言。

我是Angular 7的新手，所以也许我正在考虑所有错误。请提供有用的示例或有用的链接作为答复。

如何在组件声明之外注入服务

0 个答案: