2017-03-20 1 views
1

ngx-translates私は翻訳入力を与える2つの方法を検討しています。パイプ{{'messageId' | translate}} 角度2の不純パイプ対指示性能

  • ORディレクティブ<span [translate]="'messageId'">
  • としてパイプなど

    1. どちらの翻訳とテキストの任意の非同期ロードを処理することができ不純なパイプです。このアプローチの欠点は、ダイジェストサイクルが実行されるたびにトリガーされるということです。

      他の方法では、このディレクティブを使用します。この場合、EventsまたはObservablesを使用してメソッドが起動されるタイミングを制御できます。この方法は、不必要な更新を削減します。

      しかし、DOMを操作するディレクティブのため、私の疑問は、ディレクティブのアプローチは物事を全体的に遅くするでしょうか?また、もう一方のパフォーマンスを測定する方法はありますか?

    答えて

    3

    角度の補間は、プロパティバインディングよりも構文上の砂糖です。ドキュメントで説明したように、これらの二つは同じ

    <p><span>"{{title}}" is the <i>interpolated</i> title.</span></p> 
    <p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p> 
    

    あるあなたが結合性のメリットをご覧あれば、それのために行きます。

    +0

    問題は、 '[translate]'ディレクティブは単にバインディング以上のことをします。それでもDOMに書き込む必要があります。 'node.textContent = this.key? node.currentValue:node.originalContent.replace(key、node.currentValue); this._ref.markForCheck(); ' これは[ソースコード](https://github.com/ngx-translate/core/blob/master/src/translate.directive.ts)で使用されています。これはプロパティバインディングよりも遅いでしょうか? – nipuna777

    +0

    私は補間も同じバインディングインフラストラクチャを使うのと同じことをする必要があると思います。 – Chandermani