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に変換すると、正常に動作します。
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
をどこでも使用できます。
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"
これが役立つことを願っています