typescript ngx-translate .instant 返回键而不是值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46216185/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ngx-translate .instant returns key instead of value
提问by OjamaYellow
I am trying to make a method which would accept string key and return translated string value by using translate.instant(parameter). The problem is that it returns key(parameter). Usually this is returned if it doesn't find translation. I think the problem is that method gets called before loader loads translations.
我正在尝试使用 translate.instant(parameter) 制作一种方法，该方法可以接受字符串键并返回翻译后的字符串值。问题是它返回键（参数）。如果没有找到翻译，通常会返回。我认为问题在于该方法在加载程序加载翻译之前被调用。
My app.module.ts imports:
我的 app.module.ts 导入：
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [HttpClient]
}
})
createTranslateLoader function:
createTranslateLoader 函数：
export function createTranslateLoader(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
In my app.component:
在我的 app.component 中：
constructor(public translate: TranslateService){
translate.setDefaultLang('en');
translate.use('en');
}
When I translate in html using pipes it works ok.
当我使用管道在 html 中翻译时，它工作正常。
回答by Ján Hala?a
You are using the TranslateHttpLoaderwhich makes an HTTP request when it's asked for translations - translate.use('en'). If you call the instant(messageKey)method before the HTTP call returns, ngx-translate will return the key, since it has no translations yet. So you should use the get(messageKey)method to get the translation - it's asynchronous and returns an Observable:
您正在使用 ，TranslateHttpLoader它在要求翻译时发出 HTTP 请求 - translate.use('en')。如果您instant(messageKey)在 HTTP 调用返回之前调用该方法，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'
});
You can use the instantmethod only when you are sure that the translations have been already loaded (as in the code example) or you can write your custom synchronous translation loader and use instantanywhere.
instant仅当您确定已加载翻译（如代码示例中所示）时才可以使用该方法，或者您可以编写自定义同步翻译加载器并instant在任何地方使用。
回答by palex_dev
You can use TranslateService only when translation file is loaded. If you want to use safely TranslateService.instant you can write an angular resolver. Resolver wait to exec your component code until the observable return a value.
只有在加载翻译文件时才能使用 TranslateService。如果您想安全地使用 TranslateService.instant，您可以编写一个角度解析器。解析器等待执行您的组件代码，直到 observable 返回一个值。
This is the code:
这是代码：
-------------------------RESOLVER------------------------------------
-------------------------解析器------------------------ ------------
@Injectable()
export class TranslationLoaderResolver {
constructor(private translate: TranslateService){
}
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any>{
return this.translate.get("last.dummy"); //
}
}
---------------------ROUTING MODULE------------------
---------------------路由模块-------------------
let routing = RouterModule.forChild([
{path: "dashboard", component: DashboardComponent, resolve: {model: TranslationLoaderResolver},
children: [
........//here you can omit Resolver
},
}
-----Files i18n-----
-----文件 i18n-----
In last line add the line----> "last.dummy"="dummy translation"
I hope this can help
我希望这可以帮助
回答by abelabbesnabi
Just wrap your $translate.instant with the onReady like so:
只需像这样用 onReady 包裹你的 $translate.instant ：
$translate.onReady(function () { //Code here })
$translate.onReady(function () { //代码在这里})
