Question

我目前正在根据https://angular.io/docs/ts/latest/cookbook/i18n.html

中的指南翻译我的第一个Angular2应用程序

示例仅显示如何将i18n属性应用于模板代码以及模板代码如何国际化。

如何从组件的代码（.ts文件）或服务内部访问本地化文本？我需要这个来与我正在使用的一些JavaScript库进行交互，我需要使用本地化文本调用JavaScript函数。

Answer 1

如果您使用的是ng2-translate模块，则可以注入TranslateService：

constructor(private translateService: TranslateService) { }

并使用其get(translationKey: string)方法返回Observable。

this.translateService.get('stringToTranslate').subscribe(
    translation => {
        console.log(translation);
    });

Answer 2

我正在使用attribute translation feature。

/path/to/wp-content/themes/stefanklokgieters/.htaccess

来自父组件模板：

import {Component, Input, OnInit} from '@angular/core';

@Component({
    selector: 'app-sandbox',
    templateUrl: 'sandbox.html'
})
export class SandboxComponent implements OnInit {
    @Input()
    public title: string;

    constructor() {
    }

    ngOnInit() {
        console.log('Translated title ', this.title);
    }
}

这是一种解决方法，但我认为它是迄今为止最干净的一种。通过它，您可以访问<app-sandbox i18n-title title="Sandbox"></app-sandbox>内的翻译title。

Answer 3

  constructor(private translate: TranslateService) { }

  this.translate.get(this.pageTitle).subscribe((text:string) => {
      this.translate.onLangChange.subscribe((event: LangChangeEvent) => {
        title.setTitle(this.translate.instant(text))
      });
    });

Answer 4

如果要检测语言更改，请使用以下代码，传递您的标题密钥

this.setDocTitle('dashboard.title');

setDocTitle(titleKey: string) {
  this.translate.onLangChange.subscribe((event: LangChangeEvent) => {
    this.translate.get(titleKey).subscribe((text:string) => {
    this.titleService.setTitle(this.translate.instant(text));
  });
  }); 
}

从组件或服务访问Angular2转换

4 个答案: