打字稿中的Angular ngx-translate用法

Question

我正在使用這個 @ngx-translate/core i18n 服務，它在模板 (.html) 中使用以下語法運行良好：

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

現在我想在我的組件打字稿文件（.ts）中翻譯一些東西，但我不知道如何使用它。

我可以在構造函數中創建翻譯對象：

構造函數（私人翻譯：TranslateService）{}

現在如何翻譯'my.i18n.key'？

Answer 1

要翻譯打字稿文件中的內容，請執行以下操作

constructor(private translate: TranslateService) {}

然后在需要翻譯的地方像這樣使用

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

Answer 2

來自github上的文檔：

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和angular ngx translate的所有項目

這也適用於sweetalert2 字符串，如下面的代碼

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

感謝閱讀，如有疑問請留言。

Answer 5

我不知道問題是否出在何時發布，但是將“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 中找到的文檔中對此進行了全部解釋。

Answer 6

這對我有用（我正在使用 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 將它傳遞給輸入，希望這個例子能有所幫助。

Answer 7

您可以使用 translate.instant() 方法並傳遞存儲在 i18n 文件中的密鑰名稱。 例如：

translate.instant('hello');

如果它來自參數或變量，則直接傳遞值。

translate.instant(my.i18n.key);

你也可以參考這個答案： https ://github.com/ngx-translate/core/issues/835#issuecomment-384188498

Answer 8

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

}

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

您可以在ngOninit中訂閱 observable

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 。