2017-09-11 1 views
0

J'utilise ngx-translate pour l'internationalisation sur Ionic 3 app. J'ai utilisé pipe joliment sur le code HTML. Mais maintenant, j'ai une situation comme ci-dessous sur le fichier ts. Pouvez-vous me dire comment gérer un tel cas d'utilisation dynamique avec ngx?ngx-traduire avec texte dynamique sur le fichier ts

updateApi(topic) { 
    this.showToast(`Topic ${topic.name} subscribed!`);//this is the dynamic text 
    } 

showToast(message) { 
     let toast = this.toastCtrl.create({ 
      message: message, 
      duration: 3000 
     }); 
     toast.present(); 
    } 

Le problème ici est que je ne connais pas la valeur de ${topic.name} avant. Alors, comment puis-je donner le key/value pour cela sur le fichier i18njson? ou est-ce que je manque quelque chose ici?

Répondre

2

Vous devez injecter le Traduisez Service dans votre composant: Dans votre fichier de traduction

this.translate.get('TOPIC', {value: topic.name}).subscribe(res => { 
     showToast(res); 
}); 

vous devez déclarer:

constructor(private translate: TranslateService) {} 

Et faire un appel à lui, il retournera une observable quelque chose comme ceci:

{ 
    "TOPIC": "Topic {{value}} subscribed!" 
} 
+0

Le problème ici est que je ne connais pas la valeur de '$ {topic.name}' à l'avance. Alors, comment puis-je donner le 'key/value' pour le fichier' i18n' 'json'? ou est-ce que je manque quelque chose ici? – Sampath

+0

J'ai modifié mon message pour répondre à votre question. J'espère que cela aide. – Enima

0

Vous pouvez aussi le faire de cette façon:

this.showToast(this.translate.instant('TOPIC', {value: ${topic.name}}));