52

我正在使用这个 @ngx-translate/core i18n 服务,它在模板 (.html) 中使用以下语法运行良好:

{{'my.i18n.key'|翻译}}

现在我想在我的组件打字稿文件(.ts)中翻译一些东西,但我不知道如何使用它。

我可以在构造函数中创建翻译对象:

构造函数(私人翻译:TranslateService){}

现在如何翻译'my.i18n.key'?

4

8 回答 8

92

要翻译打字稿文件中的内容,请执行以下操作

constructor(private translate: TranslateService) {}

然后在需要翻译的地方像这样使用

this.translate.instant('my.i18n.key')
于 2018-06-08T06:23:20.477 回答
45

来自github上的文档:

get(key: string|Array, interpolateParams?: Object): Observable: 获取一个键(或键的数组)的翻译值,如果没有找到该值,则获取该键

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

constructor(private translate: TranslateService) {
    let foo:string = this.translate.get('myKey');
}
于 2017-08-24T23:35:42.257 回答
7

要翻译 Typscript 文件,请遵循代码

在标头中导入

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

在构造函数中声明为

public translate: TranslateService

假设 JSON 文件如下所示

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

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

注意:Key 代表您在 language.json 文件中使用的主键值(这里是“菜单”)

 this.translate.get('menu').subscribe((data:any)=> {
       console.log(data);
      });
于 2020-06-11T05:27:55.020 回答
3

我正在使用 angular 8 > 在我的情况下 > 如果你想将打字稿字符串翻译成另一种语言,然后使用它 > 首先,制作一个服务文件来获取翻译值,下面是我的 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.

该解决方案更适合i18nangular ngx translate的所有项目

这也适用于sweetalert2 字符串,如下面的代码

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

感谢阅读,如有疑问请留言。

于 2019-08-22T10:19:02.703 回答
3

我不知道问题是否出在何时发布,但是将“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 中找到的文档中对此进行了全部解释。

于 2021-06-18T09:45:40.923 回答
2

这对我有用(我正在使用 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 将它传递给输入,希望这个例子能有所帮助。

于 2019-05-29T21:22:33.947 回答
2

您可以使用 translate.instant() 方法并传递存储在 i18n 文件中的密钥名称。例如:

translate.instant('hello');

如果它来自参数或变量,则直接传递值。

translate.instant(my.i18n.key);

你也可以参考这个答案: https ://github.com/ngx-translate/core/issues/835#issuecomment-384188498

于 2021-11-29T08:04:09.817 回答
0
errorMessage:string="";
constructor(
    protected translate:TranslateService,
  
  ) {   

}

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

你可以订阅 observablengOninit

于 2021-03-31T12:48:41.190 回答