NGX-translate retour de sortie sans traduire

Question

J'ai utilisé ce tutoriel

https://ionicframework.com/docs/developer-resources/ng2-translate/

tout fonctionne, je peux prendre le format JSON mais pas imprimer la sortie

en.json

{ 
    "HELLO": "hola", 
    "hi":"sa" 
    } 

. constructeur ts;

constructor(public navCtrl: NavController, public navParams: NavParams, public translate: TranslateService) { 
    translate.setDefaultLang('en'); 
    } 

Bloc .html;

<div style="width: 100%;">   
     <p class="baslik">ACCOUNT</p> 
     <button ion-item> 
      <ion-label>{{ 'hi' | translate }}</ion-label> 
     </button> 
     <button ion-item> 
      <ion-label>{{ 'hi' | translate }}</ion-label> 
     </button> 
    </div> 

mais en sortie;

salut

salut

lorsque le bouton Ajouter un événement de clic, ce bloc de code;

this.translate.use('en').subscribe(
     value => { 
     // value is our translated string 
     console.log(value); 
     } 

en.json retour log;

Answer 1

J'ai suivi le tutoriel que vous avez fourni et je pourrais reproduire votre problème.

J'ai aussi regardé dans la documentation officielle du dépôt ngx-translate sur github et il y a une différence dans votre tutoriel.

Dans le tutoriel, ils utilisent la classe Http du module angulaire Http pour charger les fichiers:

export function createTranslateLoader(http: Http) { 
    return new TranslateHttpLoader(http, './assets/i18n/', '.json'); 
} 

Dans la documentation officielle qu'ils utilisent la classe HttpClient du module commun angulaire. Modifier les éléments suivants dans votre application Module:

import { HttpClientModule, HttpClient } from '@angular/common/http'; 

export function createTranslateLoader(http: HttpClient) { 
    return new TranslateHttpLoader(http, './assets/i18n/', '.json'); 
} 

@NgModule({ 
    declarations: [ 
    AppComponent 
    ], 
    imports: [ 
    BrowserModule, 
    HttpClientModule, 
    TranslateModule.forRoot({ 
     loader: { 
     provide: TranslateLoader, 
     useFactory: (createTranslateLoader), 
     deps: [HttpClient] 
     } 
    }) 
    ], 
    providers: [], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

Il y a un commentaire dans la documentation officielle

NB: si vous êtes encore angulaire < 4.3, s'il vous plaît utiliser Http de @ angulaire/http avec http-loader@0.1.0.

Answer 2

Je ne connais pas le cadre de la traduction que vous utilisez, mais il semble de leur documentaiton que vous souhaitez utiliser une définition de traduction personnalisé, mais vous ne l'appelle:

translate.setTranslation('en', myTranslation); 

où myTranslation est votre objet.

Le 'en' dans votre code que vous définissez comme valeur par défaut est une chaîne (il est entre guillemets), et semble être une sorte d'identifiant que le service de traduction utilise pour décider la langue de repli est:

Méthodes:

setDefaultLang (lang: string): Définit la langue par défaut à utiliser comme fallback

Vous voulez:

setTranslation (lang: string, traductions: objet, shouldMerge: Boolean = false): Permet de définir manuellement un objet de traductions pour une langue donnée, définissez shouldMerge true si vous voulez ajouter les traductions au lieu de les remplacer