2016-03-31 3 views
12

私は翻訳パイプを持っています。翻訳パイプは文字列をキーとして受け取り、翻訳された文字列を辞書から返します。そうこれまで性能が悪いパイプは角2(純=偽)になっていますか?

<div>Please enter a new password</div> 

:このように私のHTMLにレンダリングされます

<div>{{'login_EnterNewPassword'|translate}}</div> 

:私はこのように私のテンプレートで、パイプを使用し

import {Pipe, PipeTransform} from 'angular2/core'; 
import {TranslateService} from './translate.service'; 

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

    constructor(private _translateService : TranslateService) { 
    } 
    transform(key: string): any { 
     var translatedText = this._translateService.resources[key]; 
     if (translatedText) 
      return translatedText; 
     return key; 
    } 
} 

:パイプはこのようになります良い!

TranslatePipeはTranslateServiceに依存しています。これは現在の言語の翻訳でresourcesという辞書を保持しています。 TranslateServiceのリソースは、サーバーへのajax http呼び出しでロードされ、ユーザーが別の言語を選択した場合、バックグラウンドでリロードされます。

このようなときにすべてのテキストを更新するためにUIが必要なので、パイプの純粋なプロパティをfalseに設定しました。

すべてが完璧ですが、問題は不純なのでパイプが頻繁に実行されることです。ユーザーが10文字のパスワードを入力すると、キーダウンとキーアップのたびにチェンジトラッキングが開始され、ページ上のすべての異なる翻訳されたテキストに対してパイプが実行されます。

主な質問は次のとおりです。これは悪いことであり、全体のパフォーマンスに大きな悪影響を及ぼしますか?

また、言語が変更されたときなど、オンデマンドですべての角度を再評価する別の方法がありますか?

答えて

5

Impureパイプは、特にアレイのコピー、フィルタリング、並べ替えなどの軽微な作業を行う場合、パフォーマンスに大きな影響を与えます。

どのような変更検出サイクルでも、不浸透パイプが呼び出されます。可能であれば、同じ作業を何度も繰り返さないようにできるだけ結果をキャッシュすることが賢明です。

純粋なパイプは、入力値またはパラメータが変更されたときにのみ呼び出されます。

可能であれば、パイプを純粋に保ち、代わりに追加のパラメータを追加します。このパラメータを更新すると、パイプが再び実行されます。

+0

"可能であれば、パイプを純粋に保つことができ、代わりに追加のパラメータ" を追加することができます。pipeパラメータではなくパイプクラスプロパティでも同じことを実行できますか? (パイププロパティが変更された場合は、パラメータが消滅した場合と同じ操作を行います) 私のパイプは現在の言語を返す翻訳サービスを使用していますので、このサービスをすべてのコンポーネントに追加する必要はありません。パイプへのパラメータ。 –

+1

@GregorSrdic私はそれを理解していますが、他のオプションについてはわかりません。 –

関連する問題