Angular中使用TypeScript的ngx-translate方法

Question

我正在使用 @ngx-translate/core 的 i18n 服务，它在模板文件 (.html) 中的语法如下：

{{'my.i18n.key'|translate}}

现在我想在组件的 TypeScript 文件 (.ts) 中翻译一些内容，但我不知道该怎么做。

我可以在构造函数中创建 TranslateService 实例：

constructor(private translate: TranslateService) {}

那现在如何翻译 'my.i18n.key' 呢？

- NavCore

Answer 1

要在你的Typescript文件中翻译某些内容，请按照以下步骤进行

constructor(private translate: TranslateService) {}

然后在需要翻译的地方使用它

this.translate.instant('my.i18n.key')

- GuyFromChennai

---

这将从en.json（您的语言）文件返回已翻译的字符串。 - GuyFromChennai

这应该是正确的答案...从文档中可以看到：/** * 立即从已加载翻译的内部状态返回翻译。 * 将使用有关当前语言、首选语言甚至回退语言的所有规则，但不包括任何 Promise 处理。 */ - Halayem Anis

我不确定，“instant”仅在资源内容加载后才起作用，如果在翻译资源加载完成之前调用“instant”（例如ngOnIt），它只会返回资源的路径。 - Václav Švára

谢谢你，朋友！这个解决方案真的很简单和实用！ - AlexKh

Answer 2

从Github上的文档中得知:

get(key: string|Array, interpolateParams?: Object): Observable: 获取一个键（或一组键）的翻译值，如果未找到该值，则返回键本身

请在您的控制器/类中尝试:

constructor(private translate: TranslateService) {
    let foo:string = this.translate.get('myKey');
}

- theforce

---

谢谢！实际上这会返回一个翻译对象，我需要订阅它才能获取类似这样的字符串值：this.translate.get('my.i18n.key').subscribe(res => { console.log(res); }); - NavCore

那个工作得很好。但是，我该如何检查是否有翻译，或者它找不到任何翻译？当没有针对该键的翻译时，它只会在可观察对象中返回该键，因此我无法检查翻译的“成功”。 - dave0688

更好的构造函数：constructor(private translate: TranslateService) { let foo:string = this.translate.stream('myKey'); } - netalex

@netalex 订阅 stream 对我来说很有效，可以在语言更改时实时更新文本，而 instant 和订阅 get 只会触发一次。 - Qumber

Answer 3

要在 TypeScript 文件中进行翻译，请按以下代码进行操作：

在头部导入：

 import { TranslateService } from '@ngx-translate/core';

在构造函数中声明为

public translate: TranslateService

假设JSON文件看起来像这样。

{
    "menu":{
        "Home": "Accueil"
            }
}

在构造函数中声明以下代码。

注意：Key 代表在 language.json 文件中使用的主键值（这里是 "menu"）。

 this.translate.get('menu').subscribe((data:any)=> {
       console.log(data);
      });

- Kevin Jose

---

谢谢，它有效！ 另外，如果您想直接获取“menu.Home”的值...您可以通过以下方式获得： this.translate.instant('menu.Home')); - Prem G

它适用于嵌套对象吗？对我来说不行。 - Fiehra

Answer 4

我正在使用Angular 8 > 在我的情况下 > 如果您想将TypeScript字符串翻译成另一种语言，则可以使用以下方法：

首先，创建一个服务文件以获取翻译值。以下是我globaltranslate.service.ts文件的代码:

import { Injectable } from '@angular/core';
import {TranslateService} from '@ngx-translate/core';

constructor(public translate: TranslateService) {}

然后制作一个返回函数......

getTranslation(str) {
    const currentLang = this.translate.currentLang; // get current language
    const returnValue = this.translate.translations[currentLang][str]; // get converted string from current language
    if (returnValue === undefined) {
      return this.translate.translations.en_merch[str]; // if value is getting undefined then return default language string, en_merch is default english language file here
    } else {
      return returnValue;
    }
  }

在component.ts文件中，您可以导入服务文件并像下面的代码一样使用它...

import {GlobaltranslateService} from '../../../../services/globaltranslate.service';

@Component({
  selector: 'app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  providers: [GlobaltranslateService]   // add service in provider
})

constructor(
      private gTranslate: GlobaltranslateService // add service into constructor
  ) {}

const title = this.gTranslate.getTranslation('Title text'); // get return value by calling function 'getTranslation' in globaltranslateservice.

这个解决方案更适合所有涉及和 的项目。

这也适用于类似下面代码的sweetalert2字符串。

Swal (
   this.gTranslate.getTranslation('Warning'),
   data.message,
   'warning'
);

感谢阅读，如有任何疑问，请留言。

- ajay hariyal

---

如果翻译键具有多个级别，例如“USER.PROFILE.NAME”，那么上述代码将会出错。 - Nidhin Kumar

你可以使用 lodash 的 get 属性来处理上述情况。 https://lodash.com/docs/4.17.15#get - Nidhin Kumar

Answer 5

您可以使用 translate.instant() 方法，并传递存储在您的 i18n 文件中的键名。例如：

translate.instant('hello');

如果这个值来自参数或变量，请直接传递该值。

translate.instant(my.i18n.key);

您可以参考以下答案： https://github.com/ngx-translate/core/issues/835#issuecomment-384188498

- Mukesh Soni

Answer 6

我不知道这篇文章发布时是否有问题，但是将“get”方法分配给一个变量以获取翻译后的字符串是行不通的，因为它返回的是一个可观察对象。

应该像这样使用“get”：

constructor(private translate: TranslateService) { }
   :
   :
this.translate.get ('KEY_TO_TRANSLATE').subscribe (x=> this.translation = x);

要获取字符串，您可以使用Instant方法：

this.translation = this.translate.instant('KEY_TO_TRANSLATE')

然而，这是一种同步方法，所以如果翻译尚未加载，您将收到键而不是值。在文档中有详细的解释，该文档可以在Github上找到。

- Enrique González

Answer 7

这对我有效（我正在使用Angular 7）。 只需在构造函数中导入Translate服务，然后像这样从myfunction内部调用它：

  getTranslation(){
    let translation = "";
    let clientTranslation = this.translate.get('auth.client').subscribe(cliente =>{
        translation = cliente;
        document.getElementById("clientTest").setAttribute('value', translation);
    }
}

我在一个表单上使用了翻译，所以我通过setAttribute将其传递给输入框，希望这个例子能帮到你。

- Mariel Quezada

Answer 8

您可以使用 translate.stream，它会根据语言变化改变值。

constructor(private translate: TranslateService) {
 this.translate
  .stream('my.i18n.key')
  .subscribe((res: string) => {
    console.log(res);
  });
}

请参考https://github.com/ngx-translate/core#methods以获取更详细的解释。

- Binuri

Answer 9

errorMessage:string="";
constructor(
    protected translate:TranslateService,
  
  ) {   

}

  ngOnInit(): void {
  
   this.translate.get('PLEASE_ENTER_OTP').subscribe(data=>{
      this.errorMessage=data;
    })
  }

你可以在 ngOninit 中订阅这个可观察对象。

- Shubham Dixit