打字稿中的Angular ngx-translate用法

Question

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

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

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

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

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

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

Answer 1

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

constructor(private translate: TranslateService) {}

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

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

Answer 2

来自github上的doc :

get(key:string | Array,interpolateParams？:Object):Observable:获取键(或键数组)的翻译值,如果找不到值,则获取键

尝试在你的控制器/类:

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

Answer 3

要在 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);
      });

Answer 4

我正在使用 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.

该解决方案更适合i18n和Angx ngx 翻译的所有项目

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

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

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