从组件或服务访问 Angular2 翻译答案

【问题标题】：Access Angular2 translation from component or service从组件或服务访问 Angular2 翻译
【发布时间】：2017-03-25 18:32:31
【问题描述】：

我目前正在根据https://angular.io/docs/ts/latest/cookbook/i18n.html 中的指南翻译我的第一个 Angular2 应用程序

这些示例始终显示如何将i18n 属性应用于模板代码以及模板的代码随后如何国际化。

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

【问题讨论】：

听起来像github.com/angular/angular/issues/11405
你看看ng2-translate
不幸的是，它看起来与 #11405 完全一样。我在研究中没有发现这个问题，我的印象是一些基本的东西需要可用。我想保持正式的“angular2”，但现在 i18n 似乎太不完整了。

标签： angular internationalization

【解决方案1】：

如果你使用ng2-translate 模块，你可以注入TranslateService：

constructor(private translateService: TranslateService) { }

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

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

【讨论】：

目前看来ng2-translate 仍然是可行的方法。谢谢！
@Daniel 我需要翻译有近 50 列的响应值来翻译表单 ngOnInit 钩子，我需要指定每个键你能提供更好的可重复方式this.productSrevice.getProduct().subscribe(response => { this.cols = [ { field: 'response.data.productId', header: this.translateService.instant('Home.productID')}, { field: 'response.data.productName', header: this.translateService.instant('Home.productName') }, etc ]; console.log(this.translateService.instant('Home.productID')); }

【解决方案2】：

我正在使用attribute translation feature。

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>

这是一种解决方法，但我仍然认为它是迄今为止最干净的一种。它使您可以访问ts 中的已翻译title。

【讨论】：

但这是针对Component。这在服务中不起作用，是吗？
我实际上是在服务中使用它，使用 ngOnInit 中的设置器将title 传递给服务。是的，所以解决方案是特定于组件的，服务从组件中知道它，毕竟这不是那么干净:)
我同意这是最干净的可用解决方案。虽然我还是希望官方 i18n 工具能有所改进。

【解决方案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))
      });
    });

【讨论】：

【解决方案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));
  });
  }); 
}

【讨论】：