时间戳

首页 > 解决方案 > 如何在组件声明之外注入服务

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

问题描述

我正在开发一个Angular 7项目，并且正在使用ngx-translate库进行本地化和国际化。动态注入提供程序时遇到问题。

我有一个简单的表单组件，其中包括一个日期选择器。我正在为 Bootstrap 4 组件使用ng-bootstrap库。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 还很陌生，所以也许我在想这一切都是错的。

标签： angulartypescriptdependency-injectionngx-translate

解决方案

推荐阅读