Как использовать ngx-translate в компонентах аутентификации Akveo Nebular

Я хотел бы добавить многоязычную поддержку в приложение Angular, которое использует набор пользовательского интерфейса Nebular. Я установил и настроил модуль ngx-translate, и он отлично загружает переводы. Однако у меня проблемы с тем, чтобы заставить его работать в компонентах аутентификации. Попробую объяснить это на примере:

Я использую пользовательские компоненты, которые наследуют базовые компоненты Nebular. Например, мой компонент входа в систему объявлен следующим образом:

export class LoginComponent extends NbLoginComponent implements OnInit {

Мне нужно вставить в него ngx-translate TranslateService, поэтому конструктор должен быть примерно таким:

constructor(service: NbAuthService, options: {}, cd: ChangeDetectorRef, router: Router, translate: TranslateService) {
    super(service, {}, cd, router); 
}

Однако я получаю следующую ошибку:

Не удается разрешить все параметры для LoginComponent в /home/felip/projects/wfront/src/app/auth/login/login.component.ts: (?,?, [Объект-объект],?, [Объект-объект])

Чтобы не путаться с конструкторами, я также попытался использовать Injector в Angular для доступа к нужной службе:

app.module.ts

export let AppInjector: Injector;

login.component.ts

export class LoginComponent extends NbLoginComponent implements OnInit {
  translate = AppInjector.get(TranslateService);
  /* ... */

login.component.html

<h1 id="title" class="title">{{ "AUTH.TITLE" | translate }}</h1>

Это работает, и я вижу текст на языке, который я определяю с помощью translate.use() в конструкторе основного компонента приложения. Однако, когда я меняю язык во время выполнения, переводы не обновляются. Я уверен, что это связано с тем, как я ввел TranslateService, но я не знаю, как я могу это решить.

Какие-либо предложения? Спасибо!


person Fel    schedule 04.02.2020    source источник


Ответы (1)


Ошибка внедрения возникает из-за того, что вы не используете токен внедрения NB_AUTH_OPTIONS для разрешения options. Конструктор должен выглядеть так

login.component.ts

constructor(authService: NbAuthService, @Inject(NB_AUTH_OPTIONS) options = {}, 
  cd: ChangeDetectorRef, router: Router, translate: TranslateService) {
    super(authService, options, cd, router);
}

Рабочий пример

https://stackblitz.com/edit/nebular-dynamic-auth-api-tj5uey

Небулярный Источник

https://github.com/akveo/nebular/blob/master/src/framework/auth/components/login/login.component.ts

person Jason White    schedule 04.02.2020