web-dev-qa-db-fra.com

Impossible d'obtenir une traduction dynamique du texte avec ngx translate/core - angular 2 typescript

Problème:

J'ai un texte dynamique qui provient du fichier Json. J'utilise la méthode translate.get () comme ceci:

this.translate.get('keyInJson').subscribe(res => { 
                this.valueFromJson = res;
/*
creating an object using above text
*/
            });

Comme cela est asynchrone, je ne parviens pas à obtenir le texte traduit lors du rendu de la page. J'ai essayé d’envelopper la méthode ci-dessus dans Observables, Promises, mais il n’est pas possible d’obtenir la version traduite du texte lors du chargement de la page. J'ai pu obtenir le texte traduit après avoir essayé différentes approches, mais le code est devenu trop complexe et peu fiable.

Comportement attendu/souhaité Devrait charger la version traduite du texte

Reproduction du problème Générez le texte de manière dynamique au lieu de le coder en dur sur HTML, puis essayez de rendre la version traduite.

Environnement Angular2, TypeScript, Ionic 2

javascriptangulartypescriptionic2
9
nkadu1

@ nkadu1

instant (key: string | Array, interpolateParams ?: Object): string | Object: Obtient la valeur traduite instantanée d'une clé (ou d'un tableau de clés). Cette méthode est synchrone et le chargeur de fichiers par défaut est asynchrone. Vous êtes responsable de savoir quand vos traductions ont été chargées et vous pouvez utiliser cette méthode en toute sécurité .

const translated = this.translate.instant('keyInJson');

@masterachTranslateHttpLoader est ce que vous cherchez. Voici un article qui pourrait vous être utile.

6
Halil İbrahim Karaalp

J'utilise @ ngx-translate depuis un moment maintenant. J'utilise le module de deux manières:

  1. En utilisant le tuyau:

{{'code_to_translate' | Traduire }}

  1. Utiliser le service

const translateText: string = this.translateService.instant ('code_to_translate')

le service de traduction doit être passé dans le constructeur de votre composant (ou service)

généralement, je déclare le résultat de la chaîne dans ma fonction app.ini avant de charger les composants et je n'utilise qu'un seul service de traduction pour l'ensemble de l'application. Je déclare également mon TranslateLoader personnalisé pour gérer la source des traductions à partir de n’importe quel lieu (api externe, fichier json, etc.)

2
Ricardo

Dans votre service global:

private _valueFromJson: string;
constructor(private translate: TranslateService) {
  translate.get('keyInJson').subscribe(res => { 
    this._valueFromJson = res;
  });
}
get valueFromJson() {
  return this._valueFromJson;
}

Ou:

public valueFromJson: string;
constructor(private translate: TranslateService) {
  translate.get('keyInJson').subscribe(res => { 
    this.valueFromJson = res;
  });
}

Ensuite, dans votre modèle de composant, vous pouvez lier directement:

<div>{{ globalService.valueFromJson }}</div>

Vous pouvez également utiliser une méthode synchrone :

this.valueFromJson = translate.instant('keyInJson');
1
Francesco Colamonici

Pourquoi n'utilisez-vous pas le tube en HTML au lieu de traduire en ts?

<div>{{ 'HELLO' | translate:param }}</div>

ou

<div [innerHTML]="'HELLO' | translate"></div>
0
Ari