web-dev-qa-db-ja.com

ngx-translate .instantは値ではなくキーを返します

Translate.instant（parameter）を使用して、文字列キーを受け入れ、翻訳された文字列値を返すメソッドを作成しようとしています。問題は、key（parameter）を返すことです。通常、翻訳が見つからない場合に返されます。問題は、ローダーが翻訳をロードする前にメソッドが呼び出されることだと思います。

私のapp.module.tsのインポート：

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

createTranslateLoader関数：

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

私のapp.componentで：

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

パイプを使用してhtmlに変換すると、正常に動作します。

angulartypescriptloaderngx-translate
10
OjamaYellow

TranslateHttpLoaderを使用しています。これは、翻訳を要求されたときにHTTPリクエストを作成します-translate.use('en')。 HTTP呼び出しが戻る前にinstant(messageKey)メソッドを呼び出すと、ngx-translateはまだ翻訳を持たないため、キーを返します。したがって、翻訳を取得するにはget(messageKey)メソッドを使用する必要があります。これは非同期であり、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'
});

instantメソッドは、翻訳が既にロードされていることが確実な場合（コード例のように）にのみ使用できます。または、カスタム同期翻訳ローダーを記述してinstantをどこでも使用できます。

13
Ján Halaša

TranslateServiceは、翻訳ファイルがロードされている場合にのみ使用できます。 TranslateService.instantを安全に使用する場合は、angularリゾルバーを記述できます。リゾルバーは、observableが値を返すまでコンポーネントコードの実行を待機します。

これはコードです：

- - - - - - - - - - - - -リゾルバ - - - - - - - - - - - - ------------

@Injectable()
export class TranslationLoaderResolver {

    constructor(private translate: TranslateService){
    }

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

}

---------------------ルーティングモジュール------------------

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

-----ファイルi18n -----

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

これが役立つことを願っています

1
palex_dev