如何在组件内部使用ngx-translate

时间:2018-02-12 06:50:10

标签: angularjs ngx-translate

我在我的网站内使用ngx-translate,唯一的问题是我知道如何在html模板中使用它它工作得很好,但我怎么能在组件内调用JSON的键?

这就是我需要的东西

app.html

 <div>{{"home" | translate }}</div>

这工作正常,但在组件内我有类似的东西

 this.Items = [
      { title: 'Home', component: BookAServicePage, icon: 'settings' }
    ];

如何将此HOME替换为json文件?

1 个答案:

答案 0 :(得分:0)

我能够找到解决方案。需要注意的一点是,我必须利用DoCheck生命周期事件,以便在不刷新的情况下翻译组件级别标签。

我是这样做的。

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
        }];
  }
}