從組件或服務訪問 Angular2 翻譯

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

我正在使用屬性翻譯功能。

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 。

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