Я хотел бы добавить многоязычную поддержку в приложение 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
, но я не знаю, как я могу это решить.
Какие-либо предложения? Спасибо!