时间戳

首页 > 解决方案 > ngx-translate - 在 TypeScript 文件中翻译没有组件的键

angular - ngx-translate - 在 TypeScript 文件中翻译没有组件的键

问题描述

我将 Angular 与 @ngx-translate 模块一起使用。我有以下文件（只是声明了一些常量）：

// some.module.ts

const const1 = [
  {
    url: 'google.com',
  },
  {
    url: 'google.de',
  },
  {
    url: 'google.at',
  },
];

const someOtherConst = [
  {
    text: 'please.translate.me', // <== Should be translated
  },
];

基本上我想翻译text常量里面键的值someOtherConstant，但我不知道怎么做。

这似乎是一个如此简单的任务，但我似乎无法弄清楚如何。

标签： angulartypescriptngx-translate

解决方案

你不能以你想要的方式去做。拥有翻译服务的全部意义在于您还可以动态切换语言，这样您就不能用翻译填充常量值。您需要在使用常量的地方应用翻译。最后，您可能希望在某处显示这些值。

如果要在组件中显示值，可以将常量公开为属性，然后在模板中进行转换。

一个简单的组件：

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html' 
})
export class AppComponent {
  public get textToTranslate() {
    return someOtherConst[0].text;
  }
}

翻译它的组件模板：

<h3>{{ textToTranslate | translate }}</h3>

如果您需要在代码中进行翻译，则需要在服务或组件中进行翻译，您可以在其中注入TranslateService并使用任何方法来获得翻译，具体取决于您的需要。

这是一项服务，提供了三种可能的翻译方式：

@Injectable()
export class ServiceWithTranslations {
  constructor(public translateService: TranslateService) {
    // get text with current language
    this.translateService.get(someOtherConst[0].text).subscribe((translatedText => {
      console.log(translatedText);
    }));
    // gets translation and emits new value if language changes
    this.translateService.stream(someOtherConst[0].text).subscribe((translatedText => {
      console.log(translatedText);
    }));
    // gets translation with current language you need to be sure translations are already loaded so it is not reccomended
    const translatedText = this.translate.instant(someOtherConst[0].text);
    console.log(translatedText);
  }
}

我认为您想要的最接近的选择是创建一个准备翻译的服务，然后将此服务注入您需要翻译的组件或服务中。

以下是此类服务的基本示例：

@Injectable()
export class TranslationsService {
  public translatedConsts = [];

  constructor(private translateService: TranslateService) {
    for (const textEntry of someOtherConst) {
      const translatedConst = {
        text: ''
      };
      this.translateService.stream(textEntry.text).subscribe((translatedText) => {
        translatedConst.text = translatedText
      });
      this.translatedConsts.push(translatedConst);
    }
  }
}

推荐阅读