web-dev-qa-db-fra.com

ngx-translate .instant renvoie la clé au lieu de la valeur

J'essaie de créer une méthode qui accepterait la clé de chaîne et renverrait la valeur de chaîne traduite à l'aide de translate.instant (paramètre). Le problème est qu'il renvoie la clé (paramètre). Généralement, ceci est retourné s'il ne trouve pas de traduction. Je pense que le problème est que cette méthode est appelée avant que le chargeur charge les traductions.

Mes importations app.module.ts:

    TranslateModule.forRoot({
  loader: {
    provide: TranslateLoader,
    useFactory: (createTranslateLoader),
    deps: [HttpClient]
  }
})

fonction createTranslateLoader: 

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

Dans mon app.component:

constructor(public translate: TranslateService){
   translate.setDefaultLang('en');
   translate.use('en');
}

Quand je traduis en html en utilisant des pipes ça marche bien.

angulartypescriptloaderngx-translate
5
OjamaYellow

Vous utilisez la variable TranslateHttpLoader qui émet une requête HTTP lorsque la traduction est demandée - translate.use('en'). Si vous appelez la méthode instant(messageKey) avant le retour de l'appel HTTP, ngx-translate renverra la clé car il n'a pas encore de traduction. Vous devez donc utiliser la méthode get(messageKey) pour obtenir la traduction. Elle est asynchrone et renvoie une variable Observable:

this.translateService.get('hello.world').subscribe((translated: string) => {
    console.log(res);
    //=> 'Hello world'

    // You can call instant() here
    const translation = this.translateService.instant('something.else');
    //=> 'Something else'
});

Vous pouvez utiliser la méthode instant uniquement lorsque vous êtes sûr que les traductions ont déjà été chargées (comme dans l'exemple de code) ou vous pouvez écrire votre chargeur de traduction synchrone personnalisé et utiliser instant n'importe où.

5
Ján Halaša

Vous pouvez utiliser TranslateService uniquement lorsque le fichier de traduction est chargé. Si vous souhaitez utiliser TranslateService.instant en toute sécurité, vous pouvez écrire un résolveur angulaire. Le résolveur attend pour exécuter le code de votre composant jusqu'à ce que l'observable renvoie une valeur. .

C'est le code:

------------------------- RESOLVER ------------------------ ------------

@Injectable()
export class TranslationLoaderResolver {

    constructor(private translate: TranslateService){
    }

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any>{
        return this.translate.get("last.dummy"); //
    }

}

--------------------- MODULE DE ROUTAGE ------------------

let routing = RouterModule.forChild([
    {path: "dashboard", component: DashboardComponent, resolve: {model: TranslationLoaderResolver},
     children: [
        ........//here you can omit Resolver
        },
}

----- Fichiers i18n -----

In last line add the line----> "last.dummy"="dummy translation"

J'espère que cela peut aider

1
palex_dev