1

我想为使用 Nebular UI 工具包的 Angular 应用程序添加多语言支持。我已经安装并配置ngx-translate了模块，它可以很好地加载翻译。但是，我无法使其在身份验证组件中工作。我将尝试用一个例子来解释它：

我正在使用继承 Nebular 基础组件的自定义组件。例如，我的登录组件声明如下：

export class LoginComponent extends NbLoginComponent implements OnInit {

我需要将 ngx-translateTranslateService注入其中，所以构造函数应该是这样的：

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

但是，我收到以下错误：

无法解析 /home/felip/projects/wfront/src/app/auth/login/login.component.ts 中 LoginComponent 的所有参数：(?, ?, [object Object], ?, [object Object])

为了避免弄乱构造函数，我还尝试使用 AngularInjector来访问所需的服务：

app.module.ts

export let AppInjector: Injector;

登录组件.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，但我不知道如何解决。

有什么建议么？谢谢！

4

1 回答 1

2

发生注入错误是因为您没有使用NB_AUTH_OPTIONS注入令牌来解决options. 构造函数应该看起来像

登录组件.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

于 2020-02-04T15:26:29.107 回答