Angularプロジェクトのソースコードでi18tをテキストに使用するにはどうすればよいですか？

Question

私はAngular 4のi18n機能を使用しており、ターゲット言語でangular-cliでプロジェクトを成功裏に構築しています。 HTMLテンプレートは正しく翻訳されています。しかし、私はJavaScriptのコードでいくつかのテキストを得た。

のjsソースで使用されている文字列をローカライズするにはどうすればよいですか？ i18nにはソリューションが付属すると期待できますか？

現在、私は使用する翻訳を決定するためにロケールを使用しています。 ロケールがng serve --locale frまたはng build --locale fr

建物/このように配信が設定されます：（私は偉大に従っていました

import { LOCALE_ID } from '@angular/core'; 
// ... 
constructor (@Inject(LOCALE_ID) locale: string) { 
} 

：

ng serve --aot --locale fr ... 

と、このようなコードでロケールを使用してヒントon http://blog.danieleghidoli.it/2017/01/15/i18n-angular-cli-aot/）

Answer 1

コードの中にI18nPipeを使用してください：

transform()が与えられた stringパラメータがそれを翻訳することをあなたの I18nPipeクラス内のメソッドである

constructor(private translator: I18nPipe) { 
    let translatedText = this.translator.transform('Hello'); 
} 

。例：

国際化パイプ：

@Pipe({ 
    name: 'i18n', 
    pure: false 
}) 
export class I18nPipe implements PipeTransform { 

    constructor(public i18nService: I18nService) { 
    } 

    transform(phrase: any, args?: any): any { 
     return this.i18nService.getTranslation(phrase); 
    } 

} 

i18nService：

@Injectable() 
export class I18nService { 

    public state; 
    public data: {}; 

    getTranslation(phrase: string): string { 
     return this.data && this.data[phrase] ? this.data[phrase] : phrase; 
    } 

    private fetch(locale: any) { 
     this.jsonApiService.fetch(`/langs/${locale}.json`) 
      .subscribe((data: any) => { 
       this.data = data; 
       this.state.next(data); 
       this.ref.tick(); 
      }); 
    } 
} 

ごi18nServiceあなたが（にfetch()方法で現在の言語を取得し、カスタムAPIサービスを介しているに私のケースはjsonApiServiceです）あなたはes.json、en.json、de.jsonなどからデータを取得します（yo ur localパラメータ）およびgetTranslation()実際には、指定されたパラメータを変換してその変換された値を返します。

更新1：これにより

、あなたはes.jsonのようなファイルを持つことができます。

"hello": "Hola", 
"sentence1": "This is the sentence 1", 
"goodbye": "Adiós" 

をそしてこの@Pipeは私のようなあなたの.component.tsファイルに変換を適用するために、コードで使用することができます（これは、AjaxでレンダリングされたDataTableなど）の場合に便利です。。

それとも単に、あなたのテンプレートに適用することができます。

{{ 'hello' | i18n }} 
{{ this.goodbyeStringVariable | i18n }}