web-dev-qa-db-ja.com

Angularの不純なパイプとは何ですか？

@Pipe({name:'myPipe', pure: false})

不純なパイプを理解することはできませんが、純粋なパイプの方が良いものもあります。

簡単で基本的な例で説明してください。

angularangular-pipe
35
Mr_Perfect

純粋なパイプは、Angular=が値またはパイプに渡されるパラメーターの変更を検出した場合にのみ呼び出されます。値またはパラメーターが変更されたかどうかに関係なく、変更検出サイクルごとに不純なパイプが呼び出されます.

これは、Angularによって検出されない変更に関連しています

  • コンテンツを変更した配列またはオブジェクトを渡すとき（ただし、同じインスタンスです）
  • パイプが他の値にアクセスするためのサービスを注入すると、Angularはそれらが変更されたかどうかを認識しません。

これらの場合、おそらくパイプを実行したいでしょう。

不純なパイプは効率が悪い傾向があることに注意してください。たとえば、配列がパイプに渡されてフィルター処理、並べ替えなどが行われると、変更検出（特にデフォルトのChangeDetectionStrategy設定を使用する場合）イベントが実行されるたびにこの作業が実行される可能性があります変わっていないかもしれません。パイプはこれを認識し、たとえばキャッシュされた結果を返そうとします。

45
Günter Zöchbauer

前の答えに加えて、別の違いを追加します。インスタンスの数です。

パイプがHTMLコードで複数回使用されているとします。好む：

<p> {{'Hello' | translate }}<p>
<p> {{'World' | translate }}<p>
  • パイプが純粋な場合：パイプのインスタンスは1つだけです。変換メソッドは同じインスタンスで2回呼び出されます。
  • パイプが不純な場合：パイプのインスタンスが2つあります。

（これは、パイプのコンストラクターでランダムIDを生成し、constructorメソッドとtransformメソッドの両方で出力することで確認できます）

純粋なパイプ（または一般的に純粋な関数）には副作用がありません（通常はありません）ので、同じ純粋なコードを何回も心配することなく再利用できます。これが、純粋なパイプが一度だけインスタンス化される理由です。

OBS：これはmy angular 4.0環境で有効です。

24
Dacian

StackBlitzのデモをクリック

angularでは、pipeをpureおよびimpureとして使用できます

純粋または不純なパイプとは何ですか？

簡単に言えば、
impure-pipeはcomponentのすべての変更に対して機能します
pure-pipeは、componentがロードされている場合にのみ機能します。

パイプを純粋または不純にする方法は？

@Pipe({
  name: 'sort',
  pure: false //true makes it pure and false makes it impure
})
export class myPipe implements PipeTransform {

  transform(value: any, args?: any): any {
     //your logic here and return the result
  }

}

それを使用する方法？

<div> {{ arrayOfElements | sort }}<div>

不純なパイプを使用する場合は注意してください。不適切な使用が行われると、システムリソースが過剰に使用される可能性があります。

純粋なパイプと不純なパイプの詳細を読む

3
WasiF

純粋なパイプと不純なパイプ

  • 純粋なパイプは、入力値への「純粋な変更」が検出された場合にのみ実行されるパイプです。

    • 純粋な変更は、プリミティブ入力（文字列、数値など）値の変更のいずれかです。または変更されたオブジェクト参照。

  • デフォルトでは、パイプは純粋なパイプです。

  • そのため、ソースが変更されたかどうかに関係なく、不純なパイプが毎回実行されます。パフォーマンスが低下します。そのため、データのフィルタリングにパイプを使用することは推奨されません。

パイプを不純にする：

  name: 'empFilter',
  pure: false  // default is set to true.
})
export class EmpFilterPipe implements PipeTransform {

  transform(employees: Employee[], searchValue?: string): Employee[] {

   }
}

<input type="text" [(ngModel)]="searchValue">
<button (click)="changeData()"></button>

changeData(): void{
    this.employees[0].name = "SOMETHING ELSE";
}

<div *ngFor="let emp of employees | empFilter : searchValue">
    {{emp.name}}
</div> 

NOTE : if pipe is pure and  employees data is changed using method "changeData()" - It will not detect the changes .
     Since input value to the  EmpFilterPipe is Object & reference of "employees"  has not been changed.
1
Ritu Gupta