如何在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); 
}

但是，出现以下错误：

无法解析LoginComponent中的所有参数/home/felip/projects/wfront/src/app/auth/login/login.component.ts：（？，？，[对象对象]，？，[对象对象]）

为了避免弄乱构造函数，我还尝试使用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