2017-01-25 1 views
1

Angular 1では、表現する値をユーザーに表示するときに、角度Filtersを使用します。 Angular 2では、同じものとしてPipeを使用しています。なぜ角度2の "フィルタ"は "パイプ"と呼ばれていますか?

角度1つのフィルタ:

HTML:

<p> {{ greetings | reverse }}</p> 

のJs:

app.filter('reverse', function() { 
    return function(input, uppercase) { 
    input = input || ''; 
    var out = ''; 
    for (var i = 0; i < input.length; i++) { 
     out = input.charAt(i) + out; 
    } 
    // conditional based on optional argument 
    if (uppercase) { 
     out = out.toUpperCase(); 
    } 
    return out; 
    }; 
}); 

角度2

HTML:

<p> {{ greetings | reverse }}</p> 

活字体:

import { Pipe, PipeTransform } from '@angular/core'; 

@Pipe({name: 'reverse'}) 
export class ReversePipe { 
    transform(input:string): string { 
    input = input || ''; 
    let out = ''; 
    for (var i = 0; i < input.length; i++) { 
     out = input.charAt(i) + out; 
    } 
    return out; 
    } 
} 

コードを見ることで、一つは両者が同じことをすることを結論付けることができます。どちらも同じ役割と責任を持っています。私が知りたいのはなぜ彼らは角2のパイプに改名されたのですか?

+0

「パイプ」は何ですか? –

+1

これは、 '| '演算子はパイプとして知られています。名前は演算子名に由来します。 –

+0

しかしパイプオペレーターもフィルターを持っていました...なぜ投票が遅れましたか?私は何か見落としてますか? –

答えて

2

パイプはより一般的な意味を持ち、フィルタリングだけでなく使用されるため、

はまたfilterは角2には存在しない理由についてdocsから段落を読むことをお勧めします:

角度は、フィルタリングやリストをソートするためのパイプが付属していません。 Angular 1に精通している開発者は、これをfilterおよびorderByとして認識しています。 等価物は角2にありません。

これは監視ではありません。角度2はそのようなパイプを提供する可能性は低い (a)それらは不十分に実行し、(b)積極的な の縮小を防止するためです。 filterとorderByの両方には、参照オブジェクトのプロパティである のパラメータが必要です。我々は先に、そのようなパイプは でなければならないことを知っていました。角の呼び出しはほとんど毎回の変更でパイプが汚れていました 検出サイクル。

フィルタリングと特に並べ替えは高価な操作です。ユーザ は、 Angularがこれらのパイプメソッドを1秒間に何度も呼び出すと、中程度のサイズのリストでもひどく劣化する可能性があります。フィルターと orderByはAngular 1アプリで悪用されていることが多く、Angular自体が遅いという苦情は になりました。この料金は の間接的な意味で公正であり、Angular 1がこのパフォーマンストラップを用意したのは で、フィルタとorderByを最初に提供しています。

関連する問題