web-dev-qa-db-fra.com

Angular ngx-translate usage in typcript

J'utilise ce service @ ngx-translate/core i18n et cela fonctionne très bien dans les modèles (.html) avec cette syntaxe:

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

Maintenant, je veux traduire quelque chose dans mon fichier TypeScript de composant (.ts) mais je ne sais pas comment l'utiliser.

Je peux créer un objet de traduction dans mon constructeur:

constructeur (traduction privée: TranslateService) {}

et maintenant comment traduire 'my.i18n.key'?

angulartypescriptngx-translate
18
NavCore

Du doc ​​sur github :

get (key: string | Array, interpolateParams ?: Object): Observable: Obtient la valeur traduite d'une clé (ou d'un tableau de clés) ou de la clé si la valeur n'a pas été trouvée

essayez dans votre contrôleur/classe:

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

Pour traduire quelque chose dans votre fichier TypeScript, procédez comme suit

constructor(private translate: TranslateService) {}

puis utilisez comme ça partout où vous devez traduire

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

Cela fonctionne pour moi (j'utilise Angular 7). Importez simplement le service Translate sur le constructeur puis appelez-le depuis ma fonction comme ceci:

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

J'utilisais la traduction sur un formulaire, donc je la passe à l'entrée avec setAttribute, j'espère que cet exemple pourrait aider.

0
Mariel Quezada

J'utilise angular 8> Dans mon cas> Si vous souhaitez traduire une chaîne TypeScript dans un autre langage, utilisez-la> Tout d'abord, créez un fichier de service pour obtenir la valeur de traduction, voici mon code pour globaltranslate Fichier .service.ts

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

constructor(public translate: TranslateService) {}

Faites ensuite une fonction de retour ........

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;
    }
  }

Et dans le fichier component.ts, vous pouvez importer le fichier de service et l'utiliser comme ci-dessous le code ...

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.

Cette solution est meilleure pour tous les projets de i18n et angularngx translate

Cela fonctionne également sur chaînes sweetalert2 comme le code ci-dessous

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

Merci d'avoir lu, si vous avez des questions, veuillez envoyer un message.

0
ajay hariyal