我试图通过translate.instant(parameter)创建一个方法,该方法可以接受字符串key并返回翻译后的字符串值。问题是它返回key(parameter)。通常,如果它没有找到翻译,就会返回key。我认为问题是加载器加载翻译之前调用了该方法。
我的app.module.ts导入:
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: (createTranslateLoader),
deps: [HttpClient]
}
})
创建翻译加载器函数:
export function createTranslateLoader(http: HttpClient) {
return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
在我的应用程序组件中:
constructor(public translate: TranslateService){
translate.setDefaultLang('en');
translate.use('en');
}
当我用管道在html中翻译时,它工作正常。
5条答案
按热度按时间gmxoilav1#
我们使用的是
TranslateHttpLoader
,它会在需要翻译时发出HTTP请求-translate.use('en')
。如果在HTTP调用返回之前调用instant(messageKey)
方法,ngx-translate将返回密钥,因为它还没有翻译。因此,您应该使用get(messageKey)
方法来获得翻译-它是异步的,并返回Observable
:只有当您确定已经加载了翻译时,才可以使用
instant
方法(如代码示例中所示),或者您可以编写自定义同步翻译加载器并在任何位置使用instant
。xytpbqjk2#
只有在加载翻译文件时才能使用TranslateService。如果要安全地使用TranslateService. instant,可以编写Angular 解析器。解析器将等待执行组件代码,直到可观察对象返回值。
这是密码:
SetLanguageService
是一个服务,您可以创建它来存储所使用的语言,例如在会话存储中(例如lang是'it',' en')。这是一个
SetLanguageService
的例子(我的应用程序只有意大利语,en lang是注解)希望这能帮上忙
chy5wohz3#
您也可以进行虚拟调用,并等待响应。响应后,每个即时调用都将工作,因为它肯定比翻译加载。
brvekthn4#
只需将您的$translate.instant与onReady封装在一起,如下所示:
$translate.onReady(函数(){ //此处为代码})
z9smfwbn5#
只是提醒一下:记得清除本地存储是我的错。