web-dev-qa-db-ja.com

Angular typescriptでのngx-translateの使用

私はこの@ ngx-translate/core i18nサービスを使用していますが、次の構文のテンプレート（.html）で正常に動作します。

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

コンポーネントのTypeScriptファイル（.ts）の何かを翻訳したいのですが、使用方法がわかりません。

私のコンストラクタで翻訳オブジェクトを作成できます：

constructor（private translate：TranslateService）{}

そして今 'my.i18n.key'を翻訳する方法？

angulartypescriptngx-translate
18
NavCore

github のドキュメントから：

get（key：string | array、interpolateParams ?: Object）：Observable：キー（またはキーの配列）の翻訳された値、または値が見つからなかった場合はキーを取得します

コントローラー/クラスで試してください：

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

TypeScriptファイル内の何かを翻訳するには、次のようにします

constructor(private translate: TranslateService) {}

次に、翻訳が必要な場所でこのように使用します

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

これは私のために動作します（私は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を使用して入力に渡します。この例が役立つことを願っています。

0
Mariel Quezada

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.

このソリューションは、i18nおよびangularngx translateのすべてのプロジェクトに適しています

これは以下のコードのようなsweetalert2文字列でも動作します

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

お読みいただきありがとうございます。質問がある場合はメッセージをお送りください。

0
ajay hariyal