Angular: i18n：テンプレートの外部で翻訳文字列を使用できます

これは本当のショートッパーだと思います。これが実装されるまで、i18nは使用する準備ができていません。
たとえば、コードで翻訳された検証メッセージを設定できません

@ Mattes83この方法で試しましたか？

<p [hidden]="!alertManagerRowForm.controls.sendTo.hasError('validateEmail')" class="help-error">
    {{ 'ALERTMANAGER__FORM__FIELD__sendTo__ERROR__validateEmail' | translate }}
</p>

：confused：ドキュメントには、コードにエラーメッセージが含まれていると便利であり、翻訳サポートにはテンプレートに何かが必要であることが示されています。 コミュニケーションの必要性が高まっているようです。

@marcalj私はこの方法を知っています...しかし、tsファイルにローカライズされた文字列を含める必要があります。
@manklu私は完全に同意します

これは本当のショートッパーだと思います。これが実装されるまで、i18nは使用する準備ができていません。
たとえば、コードで翻訳された検証メッセージを設定できません

ええ、ここでも同じです。OOTBモジュールを使用することを好むので、ng2-translateからAngular2 i18nに切り替えました。翻訳を抽出する方がはるかに簡単です（ng2-translateはより時間がかかるIMOです）
この段階では、サービスから発生したエラーメッセージを翻訳できません。 回避策もありません。

誰かが設計仕様を開始したい場合、それは役に立ちます（つまり、Googleドキュメントで）。

すべてのケースをリストする必要があります。 すぐに考えてみると、

_.('static text');
_.('with {{ parameter }}', {parameter: "parameter" });
_.plural(count, {'few': '...'});
_.select(on, {'value': '...'});

こんにちはみんな、素晴らしい機能のリクエスト：+1：

* .tsテキストを翻訳するための推奨される回避策はありますか？

@fbobbio私がやってきたことは、テンプレートに隠し要素を作成することです。
<span class="translation" #trans-foo i18n>foo</span> 。

以下を使用してそれらをバインドします。
@ViewChild('trans-foo) transFoo : ElementRef; 。

次に、変換された値を取得します
transFoo.nativeElement.textContent 。

遅れているように見えますが、私のニーズには合っています。

ng-xi18nはすでにTSコード全体を処理しているので、（文字列）プロパティに@i18n()のようなデコレータを実装してみませんか？ @Input()が一方向のデータバインディングで使用されるように、これらは変換された値で埋めることができます。
変換されていない値をコードから簡単に抽出できない場合は、次のように引数に配置するだけです。

@i18n( {
  source : 'Untranslated value',
  description: 'Some details for the translator'
} )
public set translatedProperty( value : string ) {
   this._translatedProperty = value;
}

翻訳ターゲットがない場合は、ソースをプロパティにフィードします。

これは、国際化サイクル全体、IMOに不可欠なアイテムです。

私の店では、「ng-xi18n-like」ツール（xgettextの拡張機能）に慣れています。このツールは、翻訳者の辞書ファイルに入れるマーク付きテキストを探して、すべてのタイプのソースファイルをクロールします。

私はHTMLテンプレートのクリーンで簡単なi18nマークアップが大好きで、Typescriptコードにも同じことを期待していました。

@vicbユースケースに加えて、TSコードで補間された文字列のローカリゼーションをサポートする可能性について考えています。 ただし、このようなシナリオをサポートするには、TSコードを書き直す必要がある可能性があります。 それは有効なアプローチでしょうか？

これは、Angular2が提供する翻訳にすぐに使用できるアプローチを使用できないようにする主な機能です。 多くのメタデータ駆動型コンポーネントがあり、そのキーはHTMLに保存されていない一部のメタデータに由来します。 パイプを介して、またはプログラムで利用可能な翻訳に対して翻訳できれば、これらのコンポーネントに適切な文字列を表示させることができます。

その間、この制限のため、ng-translateのようなものに制限されます。

この問題を回避する方法は、アプリケーション全体で使用されるサービスに空の「lang」オブジェクトを追加することです。 次に、div内のすべてのスパンを読み取り、そのオブジェクトに値を格納するディレクティブを適用します。 すべての文字列を、非表示のプロパティを持つページの下部にあるテンプレートに配置します。 その後、テンプレートまたはコンポーネントから文字列に到達できます。 それは醜く、同じIDのエントリを簡単に上書きできます。 しかし、それは何もないよりはましです。

サービス

@Injectable()
export class AppService {

    //Language string object.
    private _lang:Object = new Object();
    get lang():Object {
        return this._lang;
    }
}

指令

@Directive({
    selector: '[lang]'
})
export class LangDirective implements OnInit {

    constructor(
        public element: ElementRef,
        public app: AppService) {
    }

    ngOnInit() {
        let ele = this.element.nativeElement;
        for (var i = 0; i < ele.children.length; i++) {
            let id = ele.children[i].getAttribute('id');
            let value = ele.children[i].innerHTML;
            this.app.lang[id]=value;
        }
    }
}

テンプレート

<button>{{app.lang.myButtonText}}</button>
<div lang hidden >
    <span id="myButtonText" i18n="Test Button">Testing</span>
</div>

こんにちは@lvlbmeunier

正式な実装を待っている間、回避策としてこの提案を提供していただきありがとうございます。 ソリューションを実装しようとしましたが、動的変換キーを認識させることができないようです。 私はこのようにそれをやろうとしていました：

<p *ngFor="let d of dataEntry">{{app.lang[d.name]}}</p>
<div lang hidden >
<span id="{{d.name}}" *ngFor="let d of dataEntry" i18n>{{d.name}}</span>
</div>

これらの新しいキーは、私のxliffファイルには表示されません。 あなたのソリューションでこれを達成することは可能ですか？

私はそれを試したことはありませんが、xliffファイルのビルドがコードを実行しないことはほぼ確実です。 i18nに動的な値があると、その概念に反します。 リストに含まれるすべての名前がわかっている場合は、forループではなく、すべて独立して宣言する必要があります。

キーの追加は手動で機能しますが、実用的ではありません。 私の場合、APIからの翻訳が必要な何百ものテキストキーを取得します。

コードを実行し、ソースを取得してファイルにコピーできます。 x18nファイルの生成は、静的ファイルに基づいています。

4.0.0-betaを使用すると、たとえばmainTitleのようにi18nにIDを割り当てることができます。

<span i18n="title@@mainTitle">

これにより、少なくともJITコンパイラーでは、すべての「追加」変換を使用してダミーコンポーネント（アプリhtmlに追加する必要はなく、アプリモジュールのみ）を作成できます。

手始めに、コンパイラーだけでなくアプリモジュールにもプロバイダーを追加します。

// bootstrap.ts
getTranslationProviders().then(providers => {
    const options = { providers };
    // here we pass "options.providers" to "platformBrowserDynamic" as extra providers.
    // otherwise when we inject the token TRANSLATIONS it will be empty. The second argument of
   // "bootstrapModule" will assign the providers to the compiler and not our AppModule
    platformBrowserDynamic(<Provider[]>options.providers).bootstrapModule(AppModule, options);
});

次に、追加の翻訳を格納するためのダミーコンポーネントを作成します。コンポーネントを、 AppModuleのdeclarationsに追加することを忘れないでください。 これは、 ng-xi18nがhtml（私は思う）を見つけて翻訳ファイルに追加できるようにするためです。

//tmpI18N.ts
import {Component} from '@angular/core';

@Component({
    selector: 'tmpI18NComponent',
    moduleId: module.id,
    templateUrl: 'tmp.i18n.html'
})
export class TmpI18NComponent {
}

翻訳をtmp.i18n.htmlに追加します：

<!-- tmp.i18n.html -->
<span i18n="test@@mainTitle">
    test {{something}}
</span>

これで、翻訳を取得できるサービスを作成できます。

import {Injectable, Inject, TRANSLATIONS} from '@angular/core';
import {I18NHtmlParser, HtmlParser, Xliff} from '@angular/compiler';

@Injectable()
export class I18NService {
    private _source: string;
    private _translations: {[name: string]: any};

    constructor(
        @Inject(TRANSLATIONS) source: string
    ) {
        let xliff = new Xliff();
        this._source = source;
        this._translations = xliff.load(this._source, '');
    }

    get(key: string, interpolation: any[] = []) {
        let parser = new I18NHtmlParser(new HtmlParser(), this._source);
        let placeholders = this._getPlaceholders(this._translations[key]);
        let parseTree = parser.parse(`<div i18n="@@${key}">content ${this._wrapPlaceholders(placeholders).join(' ')}</div>`, 'someI18NUrl');

        return this._interpolate(parseTree.rootNodes[0]['children'][0].value, this._interpolationWithName(placeholders, interpolation));
    }

    private _getPlaceholders(nodes: any[]): string[] {
        return nodes
            .filter((node) => node.hasOwnProperty('name'))
            .map((node) => `${node.name}`);
    }

    private _wrapPlaceholders(placeholders: string[]): string[] {
        return placeholders
            .map((node) => `{{${node}}}`);
    }

    private _interpolationWithName(placeholders: string[], interpolation: any[]): {[name: string]: any} {
        let asObj = {};

        placeholders.forEach((name, index) => {
            asObj[name] = interpolation[index];
        });

        return asObj;
    }

    private _interpolate(pattern: string, interpolation: {[name: string]: any}) {
        let compiled = '';
        compiled += pattern.replace(/{{(\w+)}}/g, function (match, key) {
            if (interpolation[key] && typeof interpolation[key] === 'string') {
                match = match.replace(`{{${key}}}`, interpolation[key]);
            }
            return match;
        });

        return compiled;
    }
}

これで、次のようなことができます。

export class AppComponent {

    constructor(i18nService: I18NService) {
        // Here we pass value that should be interpolated in our tmp template as a array and 
        // not an object. This is due to the fact that interpolation in the translation files (xlf for instance)
        // are not named. They will have names such as `<x id="INTERPOLATION"/>
        // <x id="INTERPOLATION_1"/>`. And so on.
        console.log(i18nService.get('mainTitle', ['magic']));
    }
}

これはハッキーな回避策です。 しかし、少なくとも、翻訳ファイルを活用し、キーで取得し、補間することができ、アプリケーションに非表示のhtmlを含める必要はありません。

注：4.0.0-betaの現在の@angular/compiler-cli NPMパッケージには、 @angular/tsc-wrappedの誤った依存関係バージョンがあります。 これは0.4.2を指し、0.5.0である必要があります。 @vicbこれは簡単に修正できますか？ それとも、次のリリースを待つ必要がありますか？

@fredrikredflag素晴らしい！ そして、AOTはどうですか？

@ghidozAOTは別の話です。 私たちがやりたいのは、すべての翻訳をプリコンパイルして、キーで取得できるようにすることです。 ただし、 ngcはすべてのi18nを正しい翻訳に置き換えるため、これを活用することはできません。 ngcからの解析された翻訳を含む公開されたオプション/プロパティが見つかりません。 xltファイルをフェッチしてTRANSLATIONトークンで提供することにより、JITの場合と同じ動的アプローチを使用できます。 ただし、これはAOTの目的に反します。

プロダクションアプリには使用しないでください。

/// bootstrap.aot.ts
function fetchLocale() {
    const locale = 'sv';
    const noProviders: Object[] = [];

    const translationFile = `./assets/locale/messages.${locale}.xlf`;
    return window['fetch'](translationFile)
        .then(resp => resp.text())
        .then( (translations: string ) => [
            { provide: TRANSLATIONS, useValue: translations },
            { provide: TRANSLATIONS_FORMAT, useValue: 'xlf' },
            { provide: LOCALE_ID, useValue: locale }
        ])
        .catch(() => noProviders);
}

fetchLocale().then(providers => {
    const options = { providers };
    platformBrowser(<Provider[]>options.providers).bootstrapModuleFactory(AppModuleNgFactory);
});

これを実装する方法についての現在の考え：

@Component()
class MyComp {
  // description, meaning and id are constants
  monday = __('Monday', {description?, meaning?, id?});
}

• このような構造ではDOM構造に影響を与えることができなかったため、実行時の変換をサポートできました。バイナリの単一バージョンがあり、実行時に解決が行われます。
• テンプレートに対して現在行っているように、静的翻訳もサポートできます。文字列はコンパイル時に置き換えられ、パフォーマンスは向上しますが、ロケールごとにアプリのバージョンが1つになります。
• 後の時点で、テンプレートで__(...)をサポートできる可能性があります。
• これは、2.3から利用可能なTSトランスフォーマーを介して実装されます-おそらく以前にプロトタイプを作成することができました。

/ cc @ocombe

__()はまだ名前がないメソッド用だと思います（そして、メソッドは実際には__ではないでしょう？）

クラスで使用する可能性のある静的翻訳には良い考えであり、実装は非常に簡単だと思います。

いいえ__()は名前です、あなたはそれが好きではありません:)

これは一般的に翻訳フレームワークで使用されますが、他の名前を使用したい場合はimport {__ as olivier} from '@angular/core'を使用できます。

eeeeeehそれはあまり自己説明的ではありません：D
とてもプライベートな機能のようです

___メソッド名も好きではありません:)サービスになると思っていましたか？
いずれにせよ、進捗状況を確認するのは良いことです👍

好き __（）！ ：D非常にgettext-yで、短いです。

JSの世界では、 @ ocombes ng2-translateの経験しかありません。ここで、this._translateService.instant（）を使用してすべてのテキストをマークすると、ここで提案するような短い代替手段と比較して、コードがやや読みにくくなります。

あなたが知っているng2翻訳サービス__の名前を変更することを妨げるものは何もありません:)

実際、DIサービスメソッドを単純な関数でラップする方法がわかりません-とにかく、気にしないでください、それはこの問題の範囲を超えています:-)私のコメントは__を使用するための+1でした。少なくともPHPの世界では、他の翻訳フレームワークを使用したことがあります。

さて、多分___は問題なく、「this.translationService.getTranslation（）」よりもはるかに短いです。
はい、必要に応じて名前を変更できます。

$ __(...) i18n(...)はどうですか？

名前についての議論をやめてください、それは重要ではありません。 ありがとう。

@vicbにmonday = __('Monday', {description: 'First day of the week', id: 'firstDatOfWeek'});を指定すると、idで解決できます。

__('@<strong i="8">@firstDatOfWeek</strong>') // Monday

また、 Mondayは、定義されたクラスに対してローカルですか、それともどこからでも解決できますか？ 「閉じる」「開く」などの一般的な翻訳を考えています。

公式リリースでサポートされるまで、 AOTで使用することをお勧めする現在の最善の回避策は何ですか？

よろしく、
ショーン

Angular 2キッチンシンク：http： //ng2.javascriptninja.io
およびsource @ https://github.com/born2net/Angular-kitchen-sink

@vicbニュース、あそこ^

この機能が実装されるまで、私は属性変換機能を使用しています。

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にアクセスできます。

私はこの機能に取り組み始めています、デザインドキュメントがすぐに来ることを期待しています:-)

これが最も期待される機能になります

それは良いニュースです。 ありがとう@ocombe 。

デザインドキュメントはこちらから入手できます： https ：//goo.gl/jQ6tQf
フィードバックをいただければ幸いです。

甘い、できるだけ早く読んでいます！

ありがとう@ocombe

その文書を読みました。 美しい要約。

tsファイルから文字列を抽出できるのは素晴らしいですね。

TypescriptのアップグレードがAngular4でいつ利用可能になるかはわかりません。

これは、この制限に遭遇したほとんどの人が少なくとも3/6か月前にこのソリューションを使用できなくなるため、この機能はすでに数か月間利用可能になっているはずであることを意味します。

テンプレートにAngulari18nを使用しているときに、ngx-translateを使用してコントローラーの翻訳を管理しているのは私だけではないかもしれません。

すべてをi18nにマージするという目標は明らかに素晴らしいです。

しかし、Angularフレームワークでi18nを実装する方法を理解するという点での単純化は別として、このアプローチは、現在のngx-translateの実装と比較してパフォーマンスを本当に向上させるのでしょうか？

今の私の理解では、唯一のボーナスはコントローラーから文字列を抽出できることです。

また、現在の大きな制限は複数形です。アップグレード全体をリリースするときに、正しく機能していることを確認してください。 xliffとxmbの両方がこれを正しく処理しないi18n関連のチケットをたくさん読みました。 これは、実用的なソリューションを提供するためにngx-translateに戻す必要があるもう1つのケースです。

@ocombe詳細な設計ドキュメントをありがとうございます。これは、この機能要求に対する本当に良い解決策のようです。 現在の設計は、私が解決しようとしているユースケースに対応しています。

1つの質問：JITモード用のI18Nサービス、およびAOTモード用のTS2.2.xトランスの設計について説明します。 トランスフォーマーがサービスメソッドへの呼び出しを静的変換に置き換え、I18Nサービスへの残りのすべての参照を削除すると仮定して正しいですか？

@Thommas Angular4はTypeScript2.1を使用します（つまり、アップグレードする必要があります）が、実際には、Angular 2または4でTypeScriptの最新バージョン（たとえば2.2.1）をすでに使用できます。

ngx-translateを超えるパフォーマンスの向上に関しては、AOTを使用するかどうかによって異なります。 AOTを使用する場合、それは利益ですが、おそらく違いはわかりません。 JIT（AOTなし）では、ゲインはありません（実際には、 get監視可能メソッドと同期instantメソッドのどちらを使用するかによって異なりますが、監視可能コストは単純な関数呼び出しよりも高くなります）。
私はここであなたのコードでi18nについて話している。 テンプレートについて話している場合、バインディングを使用しないため、Angular i18n（AOTおよびJIT）を使用している場合は実際に目に見えるメリットがあります。 使用する翻訳が多ければ多いほど、より多くの利益が得られます。

複数形化がテンプレートの場合とまったく同じように機能することを確認します。 テンプレートに問題はありますか？

@schmuliがAngularがコードを置き換えることができるのは、AOTを使用するときだけです。 そうしないと、サービス呼び出しはコード内で同じままになります。
ただし、AOTを使用する場合、サービス呼び出しは静的変換に置き換えられます（使用する可能性のある変数のみが動的のままになります）。 I18nサービスへの参照を削除するかどうかはわかりません。将来、他の用途に使用される可能性があるため、コードを書き始めたら、トランスフォーマーで何ができるかを確認する必要があります。 これが問題になるユースケースを考えていますか？

@ocombe使用されない追加のDIインジェクションを考慮しない限り、コードを残すことが問題になるユースケースは考えられません（これは本当の問題ですか？）。

今後、他の用途に利用される可能性があることや、ユーザーのコードを変更することでエラーが発生する可能性があることを考えると、コードを完全に削除しない方がいいと思います。

このサービスを使用して、AOTの現在のロケールを取得すると便利な場合があります。 たとえば、複数の言語でテキストを返すことができるサーバーがある場合を考えてみましょう。したがって、リクエストに含めるには現在のロケールが必要になります。 ただし、回避策として、ダミーの翻訳された文字列をいつでも使用できます。

@ diego0020すでにロケールを取得できます。コアからLOCALE_IDを挿入するだけです。

@ocombe複数化はxliffで実装されておらず、グーグルの外部の誰もxmbでそれを使用する方法の手がかりを持っていません。 参照： https ：//github.com/angular/angular/issues/13780

とにかく、今のところi18nの実装を妨げるものは何もありません。 うまくいけば、すべてがNG4でより良く見え、ドキュメントは改善を反映するでしょう。 ありがとう。

xliffを使用した@ThommasICUは間もなく修正されます： https ：//github.com/angular/angular/pull/15068使用方法を知りたい場合は、ドキュメントにあります： https ：//angular.io/docs/

申し訳ありませんが、ETAはありますか？ Coz ng4.0.0リリースで利用可能になると聞きましたが、利用できません。 ありがとう

Cc @ocombe

私たちはまだ設計に取り組んでいます、考慮すべき予期しないことがたくさんあります（図書館が独自の翻訳を出荷する方法など）、...
4.2ではこれを期待しますが、保証されていません。

@ocombeに感謝します。2つの質問があります。

1. 実際には、次のように、補間を含むテンプレート内のテキストを翻訳できますか？
   <span i18n>This is {{myValue}}</span>

1. 私は実際に抽出できないので、なぜこのエラーが発生するのかわかりません。
   Could not mark an element as translatable inside a translatable section

@istiti

1. はい、できます。
2. i18nディレクティブの場所に注意を払う必要があります。他の兄弟ではなく、テキストを含む要素に直接配置する必要があります。
   例えば：
   <div i18n><span i18n>my text</span></div> -これは良くありません
   <div><span i18n>my text</span></div> -これは良いことです

@royiHalp
ありがとう

1. 補間でどのように変換しますか？
2. ngcを抽出するときに、ファイルと行およびコードスニペットを取得しますが、i18nを他のi18nにラップしていません
   それは私の親のどれが誤ってi18n属性を持っているかを見つけるのは本当に難しいです

@istiti

1. 他の要素と同じように、i18nディレクティブを追加するだけです。
   <span i18n>This is {{myValue}}</span>
   messages.xlfファイルの結果は次のようになります。
   <source>This is <x id="INTERPOLATION"/></source>
   これで、別のロケールに翻訳するときに、 <x id="INTERPOLATION"/>を文の正しい場所に配置して、他の人があなたの意味を理解できるようにする必要があります。次のようにi18nディレクティブに説明を追加できます。

1. 私の経験から、エラーCould not mark an element as translatable inside a translatable sectionは私が説明したとおりです。エラーを注意深く読むと、どのファイルに問題があるかがわかります。

@fredrikredflagトンありがとう！

あなたのコードはとても便利です！ 最近はxliff.loadが別のオブジェクトを返すように見えるため、1つの問題を修正する必要がありました。そのため、 this._translationsを次のように調整する必要があります。

const loaded = xliff.load(this._source, '');
this._translations = loaded['i18nNodesByMsgId'] ? loaded['i18nNodesByMsgId'] : {};

存在しないキーを要求した場合のgetメソッドでのマイナーな検証：

const placeholders = this._getPlaceholders(this._translations[key] ? this._translations[key] : []);

また、空のi18nコンポーネントはツリーシェイクなどであると思うので、対応するコンポーネントテンプレートに次の文字列を含める必要がありました。

<span hidden i18n="@@MY_STRING_1">String 1</span>
<span hidden i18n="@@MY_STRING_2">String 2</span>

幸運なことに、miniAppには数個の文字列が必要なだけなので、AoTを使用した本番環境でうまく機能します。
再度、感謝します！！！

P / S：Martin Roobによるxliffmergeツールは現時点では必須であり、彼のTinyTranslatorもB-）

私はAoTコンパイルを使用しており、プロジェクトは英語とロシア語の2つの言語をサポートしています。 環境設定を使用して、この問題の一時的な解決策を見つけました。

environments/environment.tsファイルには次のものが含まれます。

import { messagesEn } from '../messages/messages-en';

export const environment = {
  production: false
};

export const messages = messagesEn;

また、次のコンテンツを含む2つのファイルenvironment.prod-en.tsとenvironment.prod-ru.tsがあります。

import { messagesEn } from '../messages/messages-en';

export const environment = {
  production: true
};

export const messages = messagesEn;

そしてロシア語の場合：

import { messagesRu } from '../messages/messages-ru';

export const environment = {
  production: true
};

export const messages = messagesRu;

各メッセージファイルには、次のようなものを含めることができます。

export const messages = {
  MessageKey: 'Translation',
  AnotherMessageKey: 'Translation',
  Group: {
    MessageKey: 'Translation',
    AnotherMessageKey: 'Translation',
  }
};

私のコード（コンポーネント、サービスなど）では、メッセージをインポートするだけです。

import { messages } from '../../environments/environment';

そしてそれらを使用してください：

alert(messages.MessageKey);

.angular-cli.jsonで、本番環境の次の環境を指定しました。

"environments": {
  "dev": "environments/environment.ts",
  "prod-en": "environments/environment.prod-en.ts",
  "prod-ru": "environments/environment.prod-ru.ts"
}

できます！

@ alex-chuev JITでこれを試しましたか？

@ocombeこれがいつ利用可能になるか大まかな見積もりはありますか？

素晴らしい機能ところで:)

コンパイラーに変更が加えられるまで保留になっているので、4.2ではなく、4.3でもこれを行うことを望んでいます。

次の例の[title]のように、パラメータ値にi18nを実装する方法を知っている人は誰でもいます。
つまり、HELLOという単語に翻訳を追加します

よろしく

ショーン

HELLOがHTMLテンプレートに入力する単なる文字列である場合は、次の操作を実行できます。
`` `html

`` `` ``
ドキュメントにはこの例があります。 こちらをご覧ください： https：//angular.io/docs/ts/latest/cookbook/i18n.html#！ ＃translate-attributes

コンポーネントの文字列プロパティにバインドする必要がある場合は、この機能を待つか、（私の知る限り）カスタムの翻訳方法を実装する必要があります。

@ocombe

私たちはまだ設計に取り組んでいます、考慮すべき予期しないことがたくさんあります（図書館が独自の翻訳を出荷する方法など）、...

これは非常に重要です。 それもこの機能の一部であることを願っています。 現時点では、サードパーティのライブラリがアプリケーションに翻訳を提供する方法がわかりません。 ビルド中に指定できるXLIFFファイルは1つだけであり、言語を翻訳できるようにするには、ライブラリを事前にビルドする必要があるようです。

ええ、私もそれを待っています！ これは、英語を話さない聴衆を対象としたプロジェクトにとって非常に重要です。

それは間違いなく私たちがサポートしたいものです。チームはそれを可能にするコンパイラのリファクタリングに取り組んでいます:-)

対象となるバージョンの見積もりはありますか？ 4.3くらいかもしれないとどこかで読んだ？

リファクタリング（および重大な変更）が必要なため、v5より前にはなりません。

わぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁぁ言語。 v5はいつなのかしら？ ありがとう

@ocombe

@istiti私はそれが保証された日付ではなかったと言いました;-)
リリーススケジュールはこちらです： https ：//github.com/angular/angular/blob/master/docs/RELEASE_SCHEDULE.md
v5の最終リリースは2017‑09‑18ですが、以前にベータ版とRCがあります

コンポーネントごとに1つのロケールファイルを作成するための変更はありますか？ つまり、 messages.xlfのチャンクを作成します。たとえば、 messages.{component}.{locale}.xlfで、たとえばデフォルト言語の場合はmessages.{component}.xlfのみです。

まだ

ビルド時間@ocombeのために厳密な最小値です

私は混乱しています...この変更要求/変更は公式になるかどうか？
ここでも同じ問題がありますが、翻訳は単にテンプレートだけに適用されるわけではありません。
redux、カスタムツリービューコンポーネントなどがあります...すべてテンプレートごとではなく、コード内のjavascriptオブジェクトから生成されます

これは公式であり、間もなくリリースされますが、最初にコンパイラーに他の大幅な変更を加える必要がありました。そのため、4.3の準備ができていませんでした。

この機能が利用可能になる/計画されている正確なバージョンはわかっていますか？ 4.3.1、4.3.2 ... 4.3.X？

4.xブランチのメジャー/マイナーバージョンはもうありません（パッチのみ：https：//github.com/angular/angular/blob/master/docs/RELEASE_SCHEDULE.md）。これは、これが5.x用であることを意味します。 、どちらかわからない。

これはまだ5.xに入ると予想されますか？ ベータ版では表示されません。 ありがとう

v5.xではなくv50.xにある可能性があります😂

5.xはい。ただし、5.0には含まれない可能性があります。

ルジュ。 3août2017à12：56、 vltrnotifications @github.comaécrit：

v5.xではなくv50.xにある可能性があります😂

—
あなたが言及されたので、あなたはこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/angular/angular/issues/11405#issuecomment-319936876 、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/AAQMorXMbyI8l6K3QA4jmXEKawiEC46xks5sUad0gaJpZM4J2pkr
。

こんにちは@ocombe私はこれを機能させるプロセスに非常に興味があり、コンパイラが現在どのように機能するかによって、これはより困難な作業になります。 タイムラインがどのように見えるかについて明確にしていますか、それともこれはまだ5.0ではなく5.xである可能性がありますか？

@arackowは5.xにある可能性が最も高く、 @ vicbは、最終的にこれを可能にするコンパイラへの最後の変更に取り組んでいます。

@ocombe ...テンプレート外の文字列のソリューションの概念を説明する設計ドキュメントはありますか？ 私たちはプロジェクト開発段階にあり、それを知ることは素晴らしいことです。そのため、一時的なソリューションを何らかの方法で準備することができ、後で最終的なAngular構文に切り替えるのがはるかに簡単になります。

設計ドキュメントがありましたが、それは以前のバージョンのコンパイラに基づいており、最終的に実行する実装ではない可能性があります。 新しい実装についてより良いアイデアが得られたら、新しいパブリックデザインドキュメントを作成します

@ocombeこの機能を+1する必要があります。 今それの深刻な必要性笑：+1：素晴らしいツールを作ってくれてありがとう！ :)

現在の設計ドキュメントを理解しているので、AOTライブラリの作成者は、このライブラリを使用しているさまざまなアプリケーションに必要なすべての言語の翻訳を提供する必要があります。
私はこれを正しく理解しましたか？

これは@ gms1の良い点です。
ここでこれをテストしました。
ライブラリの作成者は、i18nタグを追加するだけです。
ライブラリを「 ngfactories 」にコンパイルしないでください（ng-conf2017でのJasonAdenの講演を参照）。そうすれば、翻訳タグは置き換えられません。 このようにng xi18nコマンドを実行すると、node_modulesフォルダー内のファイルの変換もxliffで取得されます。

したがって、翻訳を提供する必要はありませんが、有用な意味を持つi18nタグを追加する必要があります。

デザインドキュメントから引用：

AOTの場合、ソースコードは、サービス呼び出しを静的変換に置き換えるように変換されます。 そのために、TypeScriptトランスフォーマーを使用します。

では、Angular（AOT）ライブラリが通常はトランスパイル形式で公開されるとしたら、これはどういう意味ですか？ このドキュメントで.metadata.jsonへの参照は見つかりませんでした

ライブラリを最終的なコードにコンパイルするのではなく、開発者がコードを使用してコンパイルできるように準備してください。 @jasonadenがここで言及していることを参照してください。 これは、i18nタグを追加することでライブラリを翻訳可能にすることもできることを意味します。

私が言ったように@ gms1 ：

設計ドキュメントがありましたが、それは以前のバージョンのコンパイラに基づいており、最終的に実行する実装ではない可能性があります。

また、AOTコンパイラはv5向けに大幅に変更されているため、ライブラリが「aot-ready」コードを公開する方が簡単なはずです。
i18nの場合、これも可能な限り簡単/柔軟にしたいので、おそらく次のようになります。ライブラリは使用できる翻訳ファイルを公開できますが、必要に応じてオーバーライドすることもでき、提供できるはずです。ライブラリがデフォルトでサポートしていない場合は、追加の言語も同様です

この説明をありがとう@ocombe ！

@ocombeこれは、ngx-translateの機能がAngular自体で利用可能になることを意味しますか？

@ montreal91 ngx-translateのどの部分も、そのまま角度に実装することはできません。私のlibは非常に素朴なアプローチで、「ほとんど」機能しますが、フレームワークをより効率的に使用したいと考えています。
そうは言っても、angularは同様の機能を提供します（最終的な実装が異なる場合でも）。

これは、（https://github.com/PointInside/ng2-toastr）に基づくUI通知システムに取り組んでいる間の私のアプローチ（FLUX）です。 問題は、通知コンテンツが、Angular i18nシステム（xi18n）によって管理されるテンプレートではなく、サービスコールで定義されていることです。

それは私が望んでいることではありませんが、それは_実用的な_解決策です。 次のコードフラグメントからアイデアを_抽出_できます。 それが役に立てば幸い ：）

どこでも

// this call in any other component, service... 
// "info" method parameter is the "id" of the HTML element in template NotificationComponent.html
this.notificationActionCreator.success("myMessage");

NotificationComponent.ts

@Component({
    selector: 'notification-cmp',
    templateUrl: '../../public/html/NotificationComponent.html'
})
export class NotificationComponent implements OnInit, OnDestroy, AfterViewInit {

    notificationMap: Map<string, any> = new Map();
    subscription: Subscription;

    constructor(private toastr: ToastsManager,
                private vcr: ViewContainerRef,
                private store: NotificationStore,
                private elementRef: ElementRef) {

        this.toastr.setRootViewContainerRef(vcr);
    }

    ngOnInit() {
        this.subscription = this.store.payload
            .subscribe((payload: NotificationStorePayload) => this.handleStorePayload(payload));
    }

    ngOnDestroy(): void {
        this.store.destroy();
        if (null != this.subscription) {
            this.subscription.unsubscribe();
        }
    }

    ngAfterViewInit(): void {
        this.elementRef.nativeElement.querySelectorAll("div[notification-title][notification-text]")
            .forEach(el => this.notificationMap.set(el.id, {
                    title: el.attributes["notification-title"].value,
                    text: el.attributes["notification-text"].value,
                })
            );
    }

    handleStorePayload(payload: NotificationStorePayload): void {

        if (null != payload.action) {
            let notification = this.notificationMap.get(payload.notification.id);

            switch (payload.notification.type) {
                case NotificationType.SUCCESS:
                    this.toastr.success(notification.text, notification.title);
                    break;
                case NotificationType.INFO:
                    this.toastr.info(notification.text, notification.title);
                    break;
                case NotificationType.WARNING:
                    this.toastr.warning(notification.text, notification.title);
                    break;
                case NotificationType.ERROR:
                    this.toastr.error(notification.text, notification.title);
                    break;
            }
        }
    }
}

NotificationComponent.html

<div hidden
     id="myMessage"
     i18n-notification-title="@@notificationTitleMyMessage"
     i18n-notification-text="@@notificationTextMyMessage"
     notification-title="Greeting"
     notification-text="Hello world"></div>

<div hidden
     id="error"
     i18n-notification-title="@@notificationTitleError"
     i18n-notification-text="@@notificationTextError"
     notification-title="Error"
     notification-text="Something went wrong!"></div>

Angular 5がリリースされたので、i18nモジュールの変更がいつ統合されるかを確認できますか？

この機能はAngularコンパイラーの変更に依存しているように見えますが、コンパイラーを担当するチームはあまり関心がないようです。 タスクやPR、コミットがあるようには見えません:-(。ベントして申し訳ありませんが、他のすべての翻訳フレームワークに存在する非常に基本的な機能を説明するこの機能リクエストは、1年以上前のものです。この重要な機能が到着することを願っています。少なくとも5.xでは...

みんな落ち着いて。 AOTコンパイラに実装するのはばかげたことではありません。 少し信頼してください、 @ ocombeは言いました：

「おそらく5.xになります。 @ vicbは、最終的にこれを可能にするコンパイラへの最後の変更に取り組んでいます。」

はい、現在、最初のステップであるランタイムi18nに取り組んでいます。
ランタイムi18nとは、すべての言語に1つのバンドル、AOTコンパイル済みライブラリがi18nを使用でき、後で実行時に言語を変更できることを意味します。 これは、実行時に翻訳を実行できることも意味します。これは、コード内の翻訳に必要です（翻訳などのためにランタイムパーサーが必要なため）。
これが行われると、次の優先順位はコード内の翻訳になります。

しかし、typescriptトランスフォーマーを使用するようにコンパイラーを変更する前にランタイムi18nを実行することはできませんでした（これは5.0で実行されました）

どの5.xバージョンでどのi18nが改善されるか考えてみてください。 5.0.0自体でリリースされているものはありますか？

5.0：

• intl APIを使用しない新しいi18nパイプ（日付/数値/パーセント/通貨）は、すべてのブラウザーで同じように機能するため、20個のバグなどを修正しました+その他のいくつかの改善（ロケールパラメーター、新しい追加フォーマット、タイムゾーンパラメーター日付パイプ、...）
• ライブラリとコンポーネント用の新しいi18nAPI関数： https ：//next.angular.io/api？query = getlocale
• CLIとのより良い統合

5.1または5.2（予期しないブロッカーがない場合）：

• ランタイムi18n

5.x：

• i18nコード変換（テンプレートだけでなく）

そして、途中で追加するがまだ決定されていないその他のもの（https://github.com/angular/angular/issues/16477をフォローできます）。

ちょっと不思議なことに、少し遅れていますが、TSファイルでのi18nのサポートを検討するだけで、アノテーション構文について考えてみませんか？ （私は誰かがそれについても上で言及しているのを見つけました）

例は次のとおりです。
@ i18n （id = 'message1'）
message1 = "これは翻訳が必要なメッセージです";

@ i18n （id = 'dynamicMessage'）
dynamicMessage = "これは{0}"の動的メッセージです。

dynamicMessageのアノテーションを使用すると、この文字列インスタンスにアノテーションを介して関数を挿入できます。名前はformatであり、次のように使用できます。
var finalMessage = dynamicMessage.format（ 'value1'）

名前付きパラメータなどの処理についても、同様のアプローチが可能です。

問題は、優れた開発者エクスペリエンスを実現する方法ではないと思います。 問題はコンパイルについてです。

また、message1を別の文字列に変更するとどうなりますか？ その場合、すべてのi18n変数は常に定数である必要があります。 変数の使用はまったく機能しないと思います。 たとえば、Symfonyには、JS構文で次のように機能するtranslation-functionを備えたtranslator-serviceがあります： let translated = this.translator.trans('Hello %name%', [{'%name%': nameVariable}]);結果は次のようになります： <source>Hello %name%</source> <target>Bonjour %name%</target>

@MickL現在の-aot変換のポイントは、最小限で効率的なプログラムを作成することです。 そのため、動的変換のアプローチはまだ存在していません。
文字列の翻訳にダイナミクスサービスを使用していないという意味で、現在のアプローチは本当に良いと私は強く信じています。 つまり、一部のテキストが静的であることがわかっている場合は、サービスを使用せずにそのように翻訳してください。

動的翻訳の問題は単純です。つまり、文字列を表示するたびに文字列を翻訳する場合です。 本当に良い方法ではありません、
なんで？

1. あなたがそれを使用していないとき、あなたはメモリにいくつかの言語の辞書を持っているからです。
2. 動的テキストを表示するたびに、マップに移動してキーを見つけ、言語の翻訳を見つける必要があります。 あなたは「主要言語」を持っているので、毎回。

私の観点からすると、将来の解決策は次のようになります。

1. バックエンドは、翻訳したいテキストを提供します。
2. 現在の/メインの言語で表示しているすべてのテキストを置換/（または現在のアプローチであるバックエンドからダウンロード）します。 （すべてを置き換えるには時間がかかりますが、単純なラベルを表示するたびに2つのキーを見つける必要はありません）。
3. 真に動的なテキストのみを置き換えたり、バックエンドに要求したりできます。

考えてみてください。動的テキストを表示する場合は、バックエンドから受信できます。その「動的テキスト」のコピーが本当に必要な場合は、いつでもそのためのキャッシュを使用できます。

私の意見では、この問題についてもう議論する必要はありません。 実際、i18nでフルタイムで働いている男（Olivier Combe）がいます。 AOTは非常に特別であり、この問題を可能に近づける前に多くの作業を行う必要がありました。 間もなく動的な翻訳が可能になります。各言語を個別に作成する必要はもうありません。 これが行われると、後でコード内で翻訳が行われます（この問題）。 彼は、この問題が解決されるまでの道のりは、うまくいけば、これから半年かかると述べた。

興味がある場合は、Angularでのi18nの現在と未来についての07.11.17のAngular Connectでの彼のスピーチをチェックしてください： https ：//youtu.be/DWet6RvhHWI？t = 21m12s

これは、typescriptでタグ付けされたテンプレート文字列の良いユースケースのように聞こえます...

これは一般的ににおいがします。 私は毎月1回このスレッドにアクセスして進捗状況を確認していますが、期待が下がったためにがっかりすることはなくなりました。 開発者が望んでいるのは、コード内の文字列変換にテンプレートと同じオプションを使用することだけです。 この機能が不足しているため、私のコードは非表示の翻訳されたテンプレート文字列でいっぱいです。 これが最終的にサービスまたはアノテーションで達成されるかどうかは関係なく、ミリ秒余分にかかるかどうかは関係ありません。 コードから文字列を選択しているときは、変更がないかどうかを常に監視しています。 唯一の要件は、コードが解析され、関連する文字列がテンプレートベースの翻訳と同じ形式の同じファイルになってしまうことです。

@eliasreコードの翻訳を急いでいる場合は、 https： //github.com/ngx-translate/i18n-polyfillを試すことができます
同じになるという約束はありませんが、実際にはおそらく異なります（使いやすいように）、現在可能なことには制限があります...そしてそれはあなたのアプリに最大80koを追加して使用しますそのlib

待ちたくない場合はngx-translateを使用できます

@ocombe使用するプラグインまたはフレームワークの決定を待つときに、開発のタイムラインに応じて追跡および計画できるように、進捗状況の更新を提供していただけませんか。 それは非常に役に立ち、ありがたいです

@eliasreグーグルはすぐに良い解決策を作りたいと思います。 将来の変更を壊すことなく。 私たちが考えるよりもかなり時間がかかっていることに同意します。

貧しい@ocombeを気にしないでください彼は非常に一生懸命働いています！
がんばり続ける！ :)

私はこの機能に取り組んでいる人ではありません、そしてそれは休日の休憩です、私がもっと知ったらすぐにあなたに知らせます

ありがとう@ocombe

@ocombeに感謝します、更新があればここで大歓迎です。 私は過去数ヶ月間ランタイムi18nを必死に待っていました、そして最後のビルドETAは5.2でした。 ここでETAが更新されたら、すぐにお知らせください。

非常に粘り強く申し訳ありませんが、20の言語の構築は、現時点では非常に遅くなっています。

Angular 5.2がリリースされ、残念ながらi18nに関連するものが見つかりませんでした（または何か見落としていましたか？） ...- @ ocombeリリース計画について更新していただけませんか？ i18nでのあなたの努力のためにたくさんのThxとたくさんのthx！

@ocombeは私たちがここで待っている人ではありません...このコメントのYouTubeリンクをチェックしてください： https ：//github.com/angular/angular/issues/11405#issuecomment -343933617

計画は常に進化しています。 リリース予定日を指定するたびに、他の何かが優先されるか、必要になることが判明し、日付がもう一度シフトされます。 この機能を待っている皆さんにとって、それがどれほど残念なことかを私は知っています。私は優先順位を上げるためにできる限りのことをしています。
明日、i18nのバックログ/計画について話し合うための会議があります。何か新しいことがあればお知らせします。

@ocombe今月i18nがリリースされたら、24パックのクラフトビールを購入します

Angular Elementsとライブラリのサポートで何が行われているのかを尋ねられたら、ドイツビール24本と別の24本を追加します。 何が起こっているのか情報を取得していないのは恐ろしいことです。

@ocombeは、72本の高価なクラフトビールを購入するという一生に一度の機会があり、開発コミュニティを幸せにします。 あなたが私の友人のこれらのことを成し遂げれば、私たちは約束を果たします。

@MickL Angualr Elmentsは、私が理解しているように、非SPAページを構築し、角度コンポーネントをネイティブ要素として（自己ウィジェットとしても）使用できるようにします。

はい、知っています。 これは誰もが待っている他の2つの機能ですが、ステータスが何であるか、いつそれを期待するかは誰にもわかりません...

誰かが最後の27本のビールを追加することを約束した場合、私たちはそれらをカウントダウンし始めることができます！
http://www.99-bottles-of-beer.net/language-javascript-1948.html

追加します、 @ ocombe ：お気に入りのブランドに名前を付けます：D

編集：誰かがbeerbountyという名前のethバウンティに似たサービスを作成します：p

約束どおり、少し更新します。ランタイムi18nをv6でリリースすることを目指しています。これにより、5週間の猶予が与えられます。 それは短くなるでしょう、それはおそらく最後のリリースの1つで追加されるでしょう、そしてそれは旗の後ろにあるでしょう。
ランタイムi18nにはコード変換が付属している必要があります。これは、とにかくテンプレートでも機能するためです（同じメカニズムを使用する必要があります）。
とはいえ、サービスが100％準備できるかどうかは定かではありません。正しい選択であると思われる場合は、リリース直後にサービスが中断されないように、サービスを延期する場合があります。 ただし、どのような場合でもランタイムi18nに従います（これがロードマップです）。フラグの背後にあるため、メジャーバージョンをリリースする必要はなく、とにかく何も壊れないはずです）。

私たちが時間内にそれをリリースするのを妨げる可能性があるもの：

• 予期しない問題に遭遇した場合（開発がどのように機能するかを知っています）
• どこかで混乱したために内部のGoogleアプリが壊れた場合
• 何か最優先事項があり、焦点を切り替える必要がある場合
• 依存する新しいものの1つがブロックまたは遅延した場合（ランタイムi18nは、チームの他のメンバーが取り組んでいるいくつかの主要な内部変更に依存します）

• シニアangularJS開発者、PascalPrechtの翻訳ライブラリを3年間使用しています。
• わくわくしました。 Angular2ルーキー。 素朴にhttps://angular.io/guide/i18nを閲覧する
• i18nを私の専門的なプロジェクトにうまく統合する
• フロントエンドのハードコードされたすべてのラベルを1日かけていじり、100 + kbのxlfファイルに移植します。
• ngサービス内で生のラベルを翻訳する必要がある場合
• グーグルで調べて、ここにいる
• Angular6が古くなる前に解決策はありません。
• me rn
  

@Macadoshis今のところ私のpolyfillライブラリを使用できます： https ：//github.com/ngx-translate/i18n-polyfill

@Macadoshisは、alpha.46以降の経験を想像してみてください。 ;）

i18n-polyfillを@ocombeに向けていただきありがとうございますが、翻訳キーの非同期読み込みをサポートしているため、 ngx-translateを使用します。
TRANSLATIONSプロバイダー用のi18n-polyfillのファクトリは、既知のブートストラップ前の固定ロケールの同期rawロードのみをサポートしているようです。

// sync loading
return require(`raw-loader!../locale/messages.${locale}.xlf`);

// @ngx-translate/i18n-polyfill/esm5/ngx-translate-i18n-polyfill.js
Tokenizer.prototype._advance = function () {
    //...
    this._index++;
    // "this._input" needs to be a string and can't handle a Promise or an Observable
    this._peek = this._index >= this._length ? $EOF : this._input.charCodeAt(this._index);
    this._nextPeek = this._index + 1 >= this._length ? $EOF : this._input.charCodeAt(this._index + 1);
}

@ocombeあなたが書いたポリフィルはリリースされているものにどれくらい近いですか？ 知っておくべきこと、または準備すべきことはありますか？ また、バージョン6でリリースされているi18nの機能のリストと、i18nでのテストの状況をリストしていただけませんか。

コード翻訳サービスの詳細は今のところわかりません。おそらく来週作業する予定です（マウンテンビューに旅行中です）。 私が知っているのは、舞台裏では、クロージャーライブラリのgoog.getMsgに似ているということだけです（これは、現在googleが内部で使用しているものだからです）： https ：//github.com/google/closure-library

v6では、ランタイムi18nをリリースします。すべてのロケールに対応する1つのバンドル、実行時に解決される翻訳、時間がある場合はコード翻訳（それ以外の場合はすぐに提供されます）。 バトルテストされない新しいレンダラー（ng-ivyと呼ばれる）を使用する必要があるため、これらすべてがフラグの背後にあります。

どうも！ @ocombe ...それは本当にいいですね！
テンプレート翻訳の構文に重大な変更はありますか？ 私は今、私たちのプロジェクトに翻訳を追加することを考えていますが、数週間で完全にやり直したくありません。

いいえ、テンプレートの構文は同じになります

素晴らしいニュースをありがとう@ocombe 、これは非常に有望です。 v6でリリースされるng-ivyレンダラーにどのような制作準備が期待できますか？ バトルテストが行​​われないことは理解していますが、本番環境で使用する準備ができており、ほぼ最新バージョンのすべての主要なブラウザで動作しますよね？

ここで進捗状況を確認できます： https ：//github.com/angular/angular/issues/21706
すべてがv6に対応できるとは思いません。フラグが立てられているため、v6のリリース後もこれを進めていきます（重大な変更などではありません）。
正直なところ、私はそれらすべてのものが何であるかわかりません：D
CLIのHelloWorldアプリがすでに機能していることを知っています。
新しいレンダラーの最適化を活用するには、これらのいくつかが必要だと思いますが、すべてをチェックしなくても機能する可能性があります。
そうは言っても、それはまた、それが生産準備ができていないことを意味します、まだそれにあなたの製品を賭けないでください。 内部のGoogleアプリではテストされないため、修正するためにいくつかの重大な変更を行う必要がある場合があります。 新しいレンダラーの使用は、ご自身の裁量であり、ご自身の責任で行ってください。

これはv6-beta4に存在しますか？

いいえ、ちがいます。 このロードマップを確認してください。この機能はi18nランタイムによってブロックされています。

@ocombeを更新しますか？

ランタイムi18nの最初のPRは、機能のテストに使用するhello worldデモアプリとともに、masterにマージされました。 実行時に動作し、サービスがまだない場合でも、理論的にはコード変換をサポートします。
今のところ、サポートはごくわずかです（静的文字列）。新しい機能の追加に取り組んでいます（来週抽出作業を行い、次にプレースホルダーと変数を使用した動的文字列を作成します）。
その後、コード変換のサービスを行います。
新しい機能が終了するとすぐにマスターにマージされるので、新しいメジャーを待つ必要はありません。

@ocombe i hearti18nの機能はv4.3にすでに含まれているはずです!! 非常に多くのリリースがありますが、i18nには何もありません。 Angularチームマネージャーはより多くの作品/開発者を割り当てることができますか私はあなただけを理解できますか、2人の開発者はすぐに先に進むことができませんこれらの2つの機能は、大規模なアプリにとって最も重要だと思いませんか？ ありがとう

@ocombeに言えることは、彼がこの機能に尽力してくれたことに感謝することだけだと思います。 開発者がもういないのは、彼が彼らを求めなかったからではないと確信しています。 彼にやらせてください、それがリリースされたときに私たちは後悔しないと確信しています。

参考までに...

もともとAureliaで使用するために開発された、文字列をインポートおよびエクスポートするための代替ツールがあります。これには、 jsonファイルに保存された文字列のサポートが含まれます。Webpackではjsonを直接インポートできるため、非常に便利です。 tsファイルに追加して、コードがこれらの文字列に簡単にアクセスできるようにします。

このツールはAngularテンプレートでも機能し、他にも便利な機能がたくさんあります。必要に応じて使用するか、Angularツールを改善するためにアイデアを自由に借りてください。 これに基づくWebpackローダーもあります-ドキュメントのリンクを参照してください。

https://www.npmjs.com/package/gulp-translate

より単純な問題があり、次の機能（または@ocombeによるポリフィル）が必要かどうかはわかりません。

すべてのリアクティブフォームの構造を定数で定義し、各フォーム要素のプロパティを設定します。 例えば：

loginForm = [
  {
    type: 'email',
    placeholder: 'EMAILPLACEHOLDER' // "Your email"
  },
  {
    type: 'password,
    placeholder: 'PASSWORDPLACEHOLDER' // "Your password"
  }
];

現在、 ngx-translateを使用しているため、テンプレートでは次のように文字列を変換します。

<input *ngFor="let ele of loginForm" [type]="ele.type" [placeholder]="ele.placeholder | translate">

ここで、Angulari18nに移行します。 ただし、すべての文字列がテンプレートに含まれているわけではないため、Angulari18nをそのまま使用することはできないようです。

しかし、私たちの状況は、実行時に翻訳を取得する必要がある状況よりも単純に見えます。 すべてのテキストは定数で事前定義されており、x18nが現在テンプレートの文字列に対して行っているように、コンパイル時に置き換えることができます。

たとえば、次のようなより複雑な文字列を使用できます。

placeholder: 'I18N:description|meaning@<strong i="16">@PASSWORDPLACEHOLDER</strong>:Your password'

コンパイル時に、文字列は次のように置き換えることができます。

placeholder: 'Your password'

これは実装を検討する可能性のあるものですか？

ランタイムi18nで間違いなくそれを行うことができます。たとえば、パイプ内で新しいi18nサービスを使用して、プレースホルダーを翻訳に変換することができます。

このスレッドはしばらくの間開かれていることに気づきました。これは、HTMLとコンポーネントコードの両方のテキストに密接に対応し、Angularで多言語サイトを簡単な方法で開発することに大きな関心を示しています。
ocombeは、それが行われるときにすべての購読者にアラートを送信することを忘れないでください-私は2018年5月までにもうすぐだと理解しました。そしてあなたの親切な貢献に感謝します！

@ocombeこのランタイムサービスを使用できるようにするためにIvyを使用しますか、それとも古いエンジンでも動作しますか？

ツタだけで、まだ終わってないので今は使えません

@ocombeのご尽力に感謝します！

これらの新機能をどれだけ早く使用できるかについての言葉はありますか？

Ivyは、プレリリース状態で、現在コンパイラフラグを使用してAngular6で有効にできます。 これらの新しい18n機能は、現時点でIvyプレリリースを使用して使用できますか？

まだですが、順調に進んでいます（今はフルタイムで取り組んでいます）。 マスターでテストできるようになったら、ここに更新を投稿します

どうもありがとう@ocombe ！ 非常に多くの人々があなたの努力から恩恵を受けています。 大変感謝しております！

@ocombe tsでの静的翻訳はまだ計画されていますか？ コンパイル時の式の置換を意味します。おそらくtypescript変換を使用します。
そうでない場合、抽出せずにカスタムts変換をng buildパイプラインにプラグインできるようになりますか？

@TinyManの意味を理解できませんか？ ビルド時に翻訳をマージできることを意味しますか（現在のように）、またはtsコードで翻訳を使用できることを意味します（すでに持っているテンプレート翻訳に加えて）？

@ocombe tsで変換を使用できることを意味しますが、サービスまたはDI /ランタイム変換を介しては使用できません。 コンパイル時の変換を意味しますが、typescript用です。 Cプリプロセッサのように。 私はそれがvicbコメントに従って計画されたと思いました：

• テンプレートに対して現在行っているように、静的翻訳もサポートできます。文字列はコンパイル時に置き換えられ、パフォーマンスは向上しますが、ロケールごとにアプリのバージョンが1つになります。

たとえば、次のように記述できるようにします。

export const Notifications = {
    newComment: i18n("New comment notification@@newComment", "New comment on your story !"),
    newStory: i18n("New story notification@@newStory", "{{0}} wrote a new story !"),
}

そして、これは（frで）のようなものにトランスパイルされます：

export const Notifications = {
    newComment: "Un nouveau commentaire a été ajouté a votre article !",
    newStory: "{{0}} a écrit un nouvel article !",
}

現在、その目的のために、抽出用のカスタムマーカー（この例ではi18n ）でngx-translateを使用しています。メッセージを表示する必要がある場合は、翻訳を行うthis.translate.instant(Notifications.newStory, ["TinyMan"])を呼び出す必要があります。 +補間。 つまり、翻訳サービスを呼び出さずにNotifications.newCommentを記述できる必要があるということです。 また、文字列補間の場合、ICUと補間のみを実行する補間メソッドを使用できます（テンプレート文字列はすでに変換されています）

Notification.newStory // {{0}} a écrit un nouvel article, static string, no runtime translation
template(Notification.newStory, "TinyMan") // TinyMan a écrit un nouvel article !

ここでは、変換HTTPリクエストとサービスのオーバーヘッドを取り除くだけです。

私はそれが明らかになることを願っていますか？

あなたが説明することは確かにi18nのロードマップにあります。
今のところ、 https：//github.com/ngx-translate/i18n-polyfillがその役割を果たします。

@TinyManサービス経由かグローバル関数かはまだわかりません。 どちらも可能ですが、サービスには多くの利点もあります。テスト用にモックしたり、独自のサービスに置き換えたり、モジュール/コンポーネントごとに動作を変更したりできます。
内部的には、Googleがグローバル関数であるClosure i18n（ goog.getMsg経由）を使用することを知っています。この関数は、コンパイル中にグローバルフラグに基づくサービスに置き換えられる可能性があります。 そのフラグが外部でも使用できるかどうかを確認しようとしますが、その理由はわかりません。 しかし、それを使用する場合は、テンプレートとコードの翻訳になります

@ocombeここにも感謝の気持ちを伝えたいと思います。 私の仕事で私にとって信じられないほど役立つであろうこれに関してあなたがしている仕事にとても感謝しています。 1つの質問：テキストを検索するときに実行時にxlfを参照して正しい文字列を取得するバンドルファイルのセットを1つだけ作成するAOTコンパイルを実行する方法はありますか？

したがって、本質的には、言語ごとに1つのxlfファイルと、5つまたは6つのバンドルファイルが必要になります。 現在、10の言語があり、AOTコンパイルが50を超えるファイルがある場合、言語ごとのバンドルファイルのセット...

そのようなものの努力や複雑さはわかりませんが、1セットのファイルだけでコンパイルするのはいいことです。

はい、それは私たちがivy、ランタイムi18nで行うことです
アプリを一度バンドルし、実行時に翻訳をロードします（翻訳を遅延ロードできます）

@ocombeそれ。 は。 信じられない。

それは私を信じられないほど幸せにします。 ありがとう！

外部のテンプレートを翻訳する機能がなければ、 i18n機能は私にはまったく役に立ちません。

@ocombeこんにちはオリビエ！
更新はありますか？

ありがとう！

Angular 7（2018年9月/ 10月）に予定されているIvyが完了するのを待たなければならないので、それが行われたとしても問題はありません。

Angular 7までに、この問題は2年前のLOLになります。
いずれにせよ、アイビーはこの新機能を最も遅らせたものでした...

@ocombe 、それは素晴らしいことです。 私たちは現在、純粋にこの理由でゼロからロールアップしたレガシーi18nサービスを使用して立ち往生しています。 JSでそれを行うことができないと、私たちのためにいくつかの簡単なことを行うことが非常に困難になります。

• 動的コンポーネント
• ローカライズされたテキストを提供する必要があるサードパーティサービスとの統合
• 動的確認モーダルの表示
• APIはエラーtypes返します。 私たちのコンテキストでは、これらのエラーを動的にローカライズする必要があり、テンプレート駆動型のアプローチは扱いにくいでしょう。
• Angularチームが提案するようにTitleServiceを使用したいのですが、ローカライズされたテキストを提供する方法はありません！

Angularチームが現在これをどのように扱っているのか興味があります...

こんにちは@ vincentjames501 、
私たちの会社では、あなたが今しているのと同じことをしようとしましたが、それは非常に面倒だったので、このスレッドで前述したi18n-polyfillを使用することになり、これまでのところうまく機能しています。
私たちが抱えている唯一の欠点は、アプリのバンドルのサイズです。 3つの翻訳ファイルがあり、各バンドルにはそれらすべてが含まれています（使用する翻訳だけでバンドルを生成する方法はわかりません）。 しかし、これはすべて、アイビーが出たときに解決されることを望んでいる単なる迷惑です。
乾杯、

翻訳マップを含めて、各言語のenvironment.tsファイルに再エクスポートしました。 問題なく動作し、すべてのバンドルに含まれているわけではなく、外部ライブラリを必要としません。 私が抱えている唯一の問題は、すべてのサイトが異なるため、すべての言語で同じサービスワーカーを配置することはできず、誰かが言語を切り替えた場合、私のサイトは彼がすでにプッシュ通知に登録されているかどうかを判断できません...

@ocombe角度6のニュースはありますか？

上で説明したように、Angularv6には含まれません。 v7で計画されているIvyに依存しています。

@ocombeこのスレッドをロックして、適切なときにチームだけが意味のある更新を提供できるようにし、繰り返しの質問に答えないようにすることをお勧めしますか？

現在のAngularで使用するための私のハックは、 ng-templateを使用して、プログラムで埋め込みビューを作成することです。

<ng-template #messagetotranslate i18n>This message should be translated</ng-template>

次に、コンポーネントのtsファイルに入力します。

@ViewChild('messagetotranslate') messagetotranslate: TemplateRef<any>;

createTranslatedMessage(): string {
  return this.messagetotranslate.createEmbeddedView({}).rootNodes[0].textContent;
}

createTranslatedMessageメソッドは、翻訳されたメッセージを返します。 テンプレートを使用して最適ではないメッセージを宣言していますが、これによりCLI翻訳ツールでxlfファイルに登録できるようになり、翻訳されたメッセージをプログラムで取得してテンプレートの外部で使用できるようになります。

うまくいけば、APIはルートでも機能します！ 例えば

export const routes: Routes = [
 {
  path: '',
  component: HomeComponent,
  data: {
   title: i18n('Home'),
   breadcrumb: i18n('Home')
  }
 }
]

この機能がリリースされた場合、現在のi18n APIから大幅な変更がありますか？ 今すぐi18nでプロジェクトを開始することをお勧めしますか、それともAngular7がリリースされたときに新しいi18nApiを待つ必要がありますか？

ランタイムと動的翻訳のサポートをいつ受けるのですか？

ランタイム変換が行われ、（ivyと）マージされますが、コンパイラ側はまだ終了していません。
私は現在ICU式に取り組んでいます。
私はまだ動的変換（サービス）のコーディングを開始していませんが、おそらくICU式の後に次に行うことです。

@ vincentjames501 ICU式でi18n-polyfillsを使用できますか？それを実装する方法がわかりません

@ocombe 、ランタイム変換と動的変換の違いを明確にしていただけますか？

おそらく公式の宗派はありませんが、私が見ているのは次のとおりです。

• 実行時：翻訳は実行時に解決されます。つまり、ビルド中では解決されません（現在のように）。 すべてのタイプの翻訳（テンプレートまたはコード内）に適用されます
• 動的とは、実行時に何を翻訳したいかしかわからず、ビルド時に翻訳できないことを意味します。 これは主に、サービスを使用した「コード内」の翻訳に適用されます。 ICU式は変数に依存するという意味で動的であると考えることができると思いますが、ケースの数は有限であるため、ビルド時にすべての可能な変換を計算できます。

開発中の現在のプロジェクトへのi18nサポートの追加を延期しましたが、リリースに近づいています。これがAngular 7で最終的なものになるかどうかはわかりませんか？ または、翻訳を追加する他の方法を検討する必要がありますか？

@ andrei-tatar i18nは、Angular 2以降、完全に機能しています。唯一の欠点は次のとおりです。

• コード翻訳なし（この問題）->必要な場合は、i18n-polyfillを使用してください
• AOT（推奨）をビルドする場合、アプリは言語ごとに個別にビルドする必要があります
• 各アプリは個別に構築されているため、言語を切り替えるときにページをリロードする必要があります

最後の2つのポイントについては、代わりに@ ngx-translateを使用できます。 ただし、Angularに組み込まれているi18nとは動作が異なるため、後の更新には時間がかかる場合があります。 ポリフィルの場合、更新はすぐに行われ、おそらく重大な変更はありません。

@ocombe

Angulari18n機能を使用して条件演算子を処理する方法

2018年8月24日金曜日、16：56 David Walther Birk Lauridsen、<
[email protected]>は次のように書いています：

@ shobhit12345 https://github.com/shobhit12345

ngSwitchを使用してすべてのメッセージをテンプレート化するため、i18nタグをに添付できます
それらを個別に。

隠れる見せる歴史

不足している動的変換を回避するために、この方法を頻繁に使用します。
少し考えれば、驚くほどの量のテキストを次のように表現できます。
テンプレートではこのように。 一般的なパターンは、メッセージの配列を持つことです。
次に、これをngForおよびngSwitchとともに使用して、メッセージをテンプレート化します。
このようなもの：

ts

messsages = ['これは最初のメッセージです'、 'これは2番目のメッセージです']

html


i18n = "@@ firstMesssage">これが最初のメッセージです
i18n = "@@ secondMesssage">これは2番目のメッセージです

やや冗長ですが、機能します。

—
あなたが言及されたので、あなたはこれを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/angular/angular/issues/11405#issuecomment-415731284 、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/AGwM6jcWIpwtGxhkH1fwnVXNagRxmMnoks5uT-LxgaJpZM4J2pkr
。

Angular 7（2018年9月/ 10月）に予定されているIvyが完了するのを待たなければならないので、それが行われたとしても問題はありません。

すでに10月です。 10月末までに新機能が追加されると思いますか？

https://is-angular-ivy-ready.firebaseapp.comによると@lizzymendivilアイビーは65％完了しており、わずか30日で完了する可能性は低いようです。

はい、ツタは一ヶ月で完成しません。

@ocombeこれをロックして、更新を投稿できるのはあなただけです。 すべての「いつ行われるのか」のすべての通知を受け取るのは少し面倒です。 コメント

@ocombe Ivyは現在約94％になっているようですが、年末までに準備が整うと思いますか？

そうは思いません。 機能に対応し、バグがない（=使用可能）ことは非常に異なります。 現在、主に修正に取り組んでいます。

@ocombe i18nがAngular 8の前に来たと信じられますか？

そうは思いません。 機能に対応し、バグがない（=使用可能）ことは非常に異なります。 現在、主に修正に取り組んでいます。

わかりました、迅速な返信をありがとう、大いに感謝します。

AngularでのI18Nサポート用の「テンプレート翻訳」と一緒に利用できる「コード翻訳」の部分（最後のいくつかのコメントで年末に表示されます）をいつまでに期待すべきか@ocombeを更新しますか？ Angular I18n機能と同じようにngx-translate-polyfillをクラブすることを考えましたが、 https： //github.com/biesbjerg/ngx-translate-extractCLIを使用して既存のxlfファイルをマージするためのxlfサポートが利用できないようです。 。

ありがとう ！

@アベコンゲ

ngSwitchを使用してすべてのメッセージをテンプレート化するため、i18nタグを個別にメッセージに添付できます。
やや冗長ですが、機能します。

提案をありがとう！ 理解するのが最も簡単なようです。 私の質問は、配列に10以上のような値の「ロット」がある状況で、この実装をまだ使用していますか？ コードが非常に大きくなるようです。

そんなにたくさんあるかどうかはわかりませんが、なぜですか。 メッセージが複数の場所で使用されている場合は、基本的にスイッチとi18nタグだけの小さなi18nコンポーネントを作成します。

デビッド

デン23。1月。 2019kl。 19.24 skrev Andrew [email protected] ：

@アベコンゲ

ngSwitchを使用してすべてのメッセージをテンプレート化するため、i18nタグを個別にメッセージに添付できます。
やや冗長ですが、機能します。

提案をありがとう！ 理解するのが最も簡単なようです。 私の質問は、配列に10以上のような値の「ロット」がある状況で、この実装をまだ使用していますか？ コードが非常に大きくなるようです。

—
あなたが言及されたので、あなたはこれを受け取っています。
このメールに直接返信するか、GitHubで表示するか、スレッドをミュートしてください。

Validatorクラスでi18n-polifillsを使用する方法。 i18nサービスを介して秘密のバリデーターメッセージを使用できません。

//コンポーネントで
this.crForm = this.fb.group（{
userName：['']、
ePassword：['']、
}、{バリデーター：新しいAccValidator（this.i18n）.validate（）}
）;

//バリデーター

import {AbstractControl、ValidationErrors、FormGroup、FormControl} from '@ angle / forms';
import {I18n} from '@ ngx-translate / i18n-polyfill';
エクスポートクラスAccValidator {
コンストラクター（i18n：I18n）
{{

}
validate() {       
    return (group: FormGroup): createAccountError => {
        if (group) {
            this.i18n("test");
}}}

エラーを下回る

RRORエラー：キャッチされていません（約束中）：TypeError：i18nは関数ではありません
TypeError：i18nは関数ではありません
FormGroup.evalで[バリデーターとして]（acc-validator.ts：9）
FormGroup.AbstractControl._runValidator（forms.js：3433）で
FormGroup.AbstractControl.updateValueAndValidity（forms.js：3387）で
新しいFormGroup（forms.js：4326）
FormBuilder.group（forms.js：7864）で

@ocombe

.tsファイルのconstでi18n-polyfillsを使用する方法

エクスポートconstglossayModel =（）=> [
{{
タイトル： 'テストデータ'、
アクティブ：true、
データ： [

        [
            {
                title: 'test data',
                data: "test data."
            },
            {
                title: 'test data',
                data: "test data"
            },
            {
                title: 'test data',
                data: "test data"
            },
            {
                title: 'test data',
                data: "test data."
            },
            {
                title: 'Past Due',
                data: "test data."
            }

]]}];

{VAR_SELECT、select、Medical {Medical} Dental {Dental} Medical＆Dental {Medical＆Dental} Catastrophic＆Dental {Catastrophic＆Dental} Catastrophic {Catastrophic}}
{VAR_SELECT、select、Medical {Medical} Dental {Dental} Medical ###＆Dental {Medical y Dental}
壊滅的な###＆Dental {壊滅的なy歯科}壊滅的な{壊滅的な}}

特殊文字を含むICU式を使用している場合、変換されません。

@ocombe i18n-polyfillsを使用してブレッドクラムを処理する方法は？

constルートのエクスポート：Routes = [
{{
道： ''、
コンポーネント：HomeComponent、
データ： {
タイトル： 'ホーム'、
ブレッドクラム： 'ホーム'
}
}
]

@ocombe

.tsファイルのconstでi18n-polyfillsを使用する方法

エクスポートconstglossayModel =（）=> [
{{
タイトル： 'テストデータ'、
アクティブ：true、
データ： [

        [
            {
                title: 'test data',
                data: "test data."
            },
            {
                title: 'test data',
                data: "test data"
            },
            {
                title: 'test data',
                data: "test data"
            },
            {
                title: 'test data',
                data: "test data."
            },
            {
                title: 'Past Due',
                data: "test data."
            }

]]}];

このように使用できます
{{
データ： 'テストデータ'、
タイトル：this.i18n（{値： '名前'、id： '名前'}）、
}
このようなコンポーネントコンストラクターにI18nポリフィルを挿入します
プライベートi18n：I18n
tsファイルで翻訳を使用する場合は、ngx-extractorとxliffmergeを使用して、これらのtsファイルを翻訳する必要があります。 https://www.npmjs.com/package/ngx-i18nsupport

@ JanneHarju
それは機能せず、xlfファイルのデータを取得していません。

これが私の翻訳スクリプトです：
"translate-i18n": "ng xi18n --output-path locale && ngx-extractor -i src/**/*.ts projects/**/*.ts -f xlf -o src/locale/messages.xlf && xliffmerge --profile xliffmerge.json fi en",

これがxliffmerge.jsonです

{
  "xliffmergeOptions": {
    "srcDir": "src/locale",
    "genDir": "src/locale",
    "i18nFile": "messages.xlf",
    "defaultLanguage": "en",
    "useSourceAsTarget": true
  }
}

@ JanneHarju
はい、同じ構成を使用しており、xlfファイルで.tsメッセージを抽出できます。

しかし、私は別の.tsファイルにあります

エクスポートconstglossayModel =（）=> [
{{
}

コンポーネントをインポートしていますが、constでi18nを使用しようとすると、値が抽出されません。

プロバイダーのようなconst値を使用するとどうなりますか。

{
    provide: glossayModel,
    useFactory: () => glossayModel()
}

コードが壊れているかもしれませんが、あなたはおそらくポイントを得るでしょう。

ブレッドクラムを翻訳する方法

constルート：ルート= [
{{
パス： './ enroll-new.component'、
コンポーネント：EnrollNewComponent、
データ： {
ブレッドクラム： '登録'
}、
}
]

このスレッドをi18n-polyfillやその他の問題のサポートスレッドとして使用するのをやめることはできますか？ i18n-polyfillに関する質問がある場合は、そのリポジトリで問題を提起してください。
@ocombe多分あなたはこのトピックをロックすることができますか？ 重要なほとんどすべてをカバーする必要があります。
このトピックで言及されているi18nサポートをリリースする予定のAngularバージョンは何ですか？

はい、今のところロックされています。
オプトインベータ版としてv8でツタを利用できるようにするために懸命に取り組んでいます。 ランタイムi18nは、グーグルクロージャー（グーグルが内部で使用するもの）で使用可能になり、デバッグできるようになります（これは非常に大きな変更です）。 他のすべての人にとっては、i18nでivyをテストすることはできますが、翻訳をロードすることはできません。 アプリは、アプリのコーディングに使用された元の言語で実行されます。
実際に翻訳するために必要なランタイムサービスは、現在、翻訳されていないテキストを返します。 私たちは皆、既存のコードのバグの修正に取り組んでいるため、新機能はリリース後のみに制限されます。 v8がリリースされたら、これに取り組みます。これが私の最初のタスクになるはずです。
ニュースがありましたら、アップデートを追加してこのスレッドのロックを解除します。

私たちが取り組んでいる新しい$localizeタグの価値については、プログラムで使用できます。

例えば

const name = 'World';
$localize `Hello ${name}:name!`;

そして、コンパイル時（または実行時）に置き換えることができるHello {$name}!の翻訳を提供できるようになります。

これが利用可能になりました（文書化されていない場合）。