Angular ngx-translate 在打字稿中的用法

Question

我正在使用这个@ngx-translate/core i18n 服务，它在模板 (.html) 中工作正常，语法如下：

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

现在我想翻译我的组件打字稿文件 (.ts) 中的某些内容，但我不知道如何使用它。

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

构造函数（私有翻译：TranslateService）{}

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

Answer 1

来自 github 上的文档：

get(key: string|Array, interpolateParams?: Object): Observable: Gets the translated value of a key (or an array of keys) or the key if the value was not found

试试你的 controller/class:

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

Answer 2

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

constructor(private translate: TranslateService) {}

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

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

Answer 3

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

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

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

Answer 4

我正在使用 angular 8 > 在我的例子中 > 如果你想将打字稿字符串翻译成另一种语言，那么使用这个 > 首先，制作一个服务文件来获取翻译值，下面是我对 globaltranslate.service.ts 文件

的代码

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

constructor(public translate: TranslateService) {}

然后做一个return函数.......

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.

此解决方案更适用于i18n和angular的所有项目 ngx translate

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

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

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

Answer 5

要在 Typscript 文件中翻译，请遵循代码

在 header

中导入

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

在构造函数中声明为

public translate: TranslateService

假设 JSON 文件如下所示

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

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

注意：键代表您在 language.json 文件中使用的主键值（这里是“菜单”）

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

Answer 6

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

}

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

您可以在 ngOninit

中订阅 observable

Answer 7

我不知道问题是否出在发布时，但是将“get”方法分配给变量以获取翻译后的字符串是行不通的，因为它 returns 一个可观察的

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')

但是，这是一个同步方法，所以如果尚未加载翻译，您将获得键，而不是值。 the documentation 中的所有解释都可以在 Github 中找到。

Answer 8

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

translate.instant('hello');

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

translate.instant(my.i18n.key);

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

Answer 9

您可以使用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 了解更多说明。

Angular ngx-translate 在打字稿中的用法

Angular ngx-translate usage in typescript

typescript

ngx-translate

angular