如何在 Akveo Nebular auth 组件中使用 ngx-translate答案

【问题标题】：How to use ngx-translate in Akveo Nebular auth components如何在 Akveo Nebular auth 组件中使用 ngx-translate
【发布时间】：2020-02-04 23:26:29
【问题描述】：

我想为使用 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： (?, ?, [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 的方式有关，但我不知道如何解决。

有什么建议吗？谢谢！

【问题讨论】：

标签： angular ngx-translate nebular

【解决方案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

【讨论】：