我正在使用这个 @ngx-translate/core i18n 服务,它在模板 (.html) 中使用以下语法运行良好:
{{'my.i18n.key'|翻译}}
现在我想在我的组件打字稿文件(.ts)中翻译一些东西,但我不知道如何使用它。
我可以在构造函数中创建翻译对象:
构造函数(私人翻译:TranslateService){}
现在如何翻译'my.i18n.key'?
我正在使用这个 @ngx-translate/core i18n 服务,它在模板 (.html) 中使用以下语法运行良好:
{{'my.i18n.key'|翻译}}
现在我想在我的组件打字稿文件(.ts)中翻译一些东西,但我不知道如何使用它。
我可以在构造函数中创建翻译对象:
构造函数(私人翻译:TranslateService){}
现在如何翻译'my.i18n.key'?
要翻译打字稿文件中的内容,请执行以下操作
constructor(private translate: TranslateService) {}
然后在需要翻译的地方像这样使用
this.translate.instant('my.i18n.key')
来自github上的文档:
get(key: string|Array, interpolateParams?: Object): Observable: 获取一个键(或键的数组)的翻译值,如果没有找到该值,则获取该键
在您的控制器/类中尝试:
constructor(private translate: TranslateService) {
let foo:string = this.translate.get('myKey');
}
要翻译 Typscript 文件,请遵循代码
在标头中导入
import { TranslateService } from '@ngx-translate/core';
在构造函数中声明为
public translate: TranslateService
假设 JSON 文件如下所示
{
"menu":{
"Home": "Accueil"
}
}
在构造函数中声明以下代码。
注意:Key 代表您在 language.json 文件中使用的主键值(这里是“菜单”)
this.translate.get('menu').subscribe((data:any)=> {
console.log(data);
});
我正在使用 angular 8 > 在我的情况下 > 如果你想将打字稿字符串翻译成另一种语言,然后使用它 > 首先,制作一个服务文件来获取翻译值,下面是我的 globaltranslate.service.ts 文件代码
import { Injectable } from '@angular/core';
import {TranslateService} from '@ngx-translate/core';
constructor(public translate: TranslateService) {}
然后做一个返回函数…………
getTranslation(str) {
const currentLang = this.translate.currentLang; // get current language
const returnValue = this.translate.translations[currentLang][str]; // get converted string from current language
if (returnValue === undefined) {
return this.translate.translations.en_merch[str]; // if value is getting undefined then return default language string, en_merch is default english language file here
} else {
return returnValue;
}
}
在 component.ts 文件中,您可以导入服务文件并像下面的代码一样使用它...
import {GlobaltranslateService} from '../../../../services/globaltranslate.service';
@Component({
selector: 'app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [GlobaltranslateService] // add service in provider
})
constructor(
private gTranslate: GlobaltranslateService // add service into constructor
) {}
const title = this.gTranslate.getTranslation('Title text'); // get return value by calling function 'getTranslation' in globaltranslateservice.
该解决方案更适合i18n和angular ngx translate的所有项目
这也适用于sweetalert2 字符串,如下面的代码
Swal (
this.gTranslate.getTranslation('Warning'),
data.message,
'warning'
);
感谢阅读,如有疑问请留言。
我不知道问题是否出在何时发布,但是将“get”方法分配给变量以获取翻译后的字符串将不起作用,因为它返回一个可观察的
get 应该像这样使用:
constructor(private translate: TranslateService) { }
:
:
this.translate.get ('KEY_TO_TRANSLATE').subscribe (x=> this.translation = x);
要获取字符串,您可以使用 Instant 方法:
this.translation = this.translate.instant('KEY_TO_TRANSLATE')
然而,这是一个同步方法,所以如果翻译还没有加载,你会得到键,而不是值。可以在 Github 中找到的文档中对此进行了全部解释。
这对我有用(我正在使用 Angular 7)。只需在构造函数上导入 Translate 服务,然后从 myfunction 内部调用它,如下所示:
getTranslation(){
let translation = "";
let clientTranslation = this.translate.get('auth.client').subscribe(cliente =>{
translation = cliente;
document.getElementById("clientTest").setAttribute('value', translation);
}
}
我在表单上使用了翻译,所以我用 setAttribute 将它传递给输入,希望这个例子能有所帮助。
您可以使用 translate.instant() 方法并传递存储在 i18n 文件中的密钥名称。例如:
translate.instant('hello');
如果它来自参数或变量,则直接传递值。
translate.instant(my.i18n.key);
你也可以参考这个答案: https ://github.com/ngx-translate/core/issues/835#issuecomment-384188498
errorMessage:string="";
constructor(
protected translate:TranslateService,
) {
}
ngOnInit(): void {
this.translate.get('PLEASE_ENTER_OTP').subscribe(data=>{
this.errorMessage=data;
})
}
你可以订阅 observablengOninit