如何在 Akveo Nebular 认证组件中使用 ngx-translate

Question

我想为使用 Nebular UI 套件的 Angular 应用程序添加多语言支持。我已经安装并配置了 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); 
}

但是，我收到以下错误：

Can't resolve all parameters for LoginComponent in /home/felip/projects/wfront/src/app/auth/login/login.component.ts: (?, ?, [object Object], ?, [object Object])

为了避免混淆构造函数，我还尝试使用 Angular 的 Injector 来访问所需的服务：

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，但我不知道如何解决它。

有什么建议吗？谢谢！

Answer 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

如何在 Akveo Nebular 认证组件中使用 ngx-translate

How to use ngx-translate in Akveo Nebular auth components

ngx-translate

angular

nebular

login.component.ts