如何在组件内部使用ngx-translate [英] How to use ngx-translate inside component
本文介绍了如何在组件内部使用ngx-translate的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在网站内部使用ngx-translate,唯一的问题是我知道如何在html模板中使用它,效果很好,但是如何在组件内部调用 JSON
的键?
I am using ngx-translate inside my website, only problem is that i know how to use it inside html template it is working great, but how can i call key of JSON
inside component?
这就是我需要的
app.html
<div>{{"home" | translate }}</div>
这工作正常,但是在组件内部我有类似的东西
this is working ok, but inside component i have something like this
this.Items = [
{ title: 'Home', component: BookAServicePage, icon: 'settings' }
];
我如何替换此HOME以从 json
文件读取?
How can i replace this HOME to be read form a json
file?
推荐答案
我能够找到解决方案.需要注意的一件事是,我必须利用DoCheck生命周期事件,以便组件级标签可以在不刷新的情况下进行转换.
I was able to figure out a solution. One thing to note is I had to utilize the DoCheck lifecycle event so that component level labels would translate without a refresh.
这是我的方法.
import { Component, DoCheck } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
@Component({
selector: 'app-some',
templateUrl: './some.component.html',
styleUrls: ['./some.component.css']
})
export class SomeComponent implements DoCheck {
headers = [];
constructor(public translate: TranslateService){
}
ngDoCheck() {
this.translate.get(['HEADER.PRIORITY', 'HEADER.STATE', 'HEADER.DATE_CREATED'])
.subscribe(translations => {
this.setHeaders(translations);
});
}
setHeaders(translations) {
this.headers = [
{
title: translations['HEADER.PRIORITY'],
active: true
},{
title: translations['HEADER.STATE'],
active: false
},{
title: translations['HEADER.DATE_CREATED'],
active: false
}];
}
}
这篇关于如何在组件内部使用ngx-translate的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文