使用 ngx-translate 翻译 Kendo-UI 网格

Question

我在使用 ngx-translate 翻译 Kendo-UI 网格组件时遇到问题。

这是我的部分代码。我创建了一个网格组件，它只包含我们网格组件的基本展示。

然后我在 assets/i18n/en.json 中添加了我们的翻译。我写了一个服务，它从 Kendo-UI: code

扩展了 MessageService

export class CustomMessageService extends MessageService {

  constructor(@Injectable() private translateService: TranslateService) {
    super();
  }

  get(key: string): string {
    return (this.translateService.instant(key) as any).value;
  }
}

在 app.module 我使用了这个服务而不是他们的服务（与文档中的相同）

  providers: [
    {
      provide: MessageService,
      useClass: CustomMessageService
    }],

还有一个问题。只是在 CustomMessageService 中获取方法看不到我的翻译。

堆栈闪电战： https://stackblitz.com/edit/angular-u7aeks

我不知道为什么我不能正确翻译它。任何解决方案？

Answer 1

TLTR：在使用即时之前加载语言环境

translateService.instant 是同步的，但您需要确保您的翻译已经加载。

我已经在此处修复了您的示例。 https://stackblitz.com/edit/angular-pcipfd

基于此评论 https://github.com/ngx-translate/core/issues/517#issuecomment-299637956

使用 ngx-translate 翻译 Kendo-UI 网格

Translating Kendo-UI grid with ngx-translate

translation

kendo-grid

ngx-translate

angular