Angular 8カスタムシリーズのパイプ

パイプ本
パイプ:(非公式の解釈)データがテンプレートに表示される前に、フォーマットなど、いくつかの条件に基づいてさらに処理する必要があります.カスタムを実行する方法として理解できます.パラメータはバインドされたデータです.
ビルトインパイプ
Angularには、jsonに変換されたパイプjsonなど、通常の開発とデバッグに使用される10種類以上の内蔵パイプが内蔵されています.使用例:

{{ obejct | json }}

時間フォーマット変換のdate、英語の単語を小文字にするlowercaseなどもあります.
パイプのパラメータ化
パイプ対データ処理には複数のoptionモードが配置されている可能性があります.optionを指定する場合は、このパイプに伝えなければなりません.このプロセスをパイプパラメータ化と呼びます.たとえば、{new Date()|data:'shortDate'}}
チェーンパイプ
多層パイプ処理、jqueryチェーン式表記は「.」;パイプは'|',{{new Date()|data|lowercase}}

  date:{{currentDate}}
  

    

        date  ：{{currentDate|date}}
    
    

            date: {{currentDate|date:'shortDate'}}
    
    

            date、lowercase：{{currentDate|date|lowercase}}
    
  

カスタムパイプ
単純な増幅倍数のパイプコマンドをカスタマイズします.ファイル名は'.pipe.ts’の末尾、expand-data.pipe.ts

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

@Pipe({ name: 'expandData' })
export class ExpandData implements PipeTransform {
  transform(value: number) {
    if (value && isNumber(value)) {
      return 2 * value;
    } else {
      return 0;
    }
  }
}

テンプレートが使用できるようにappモジュールの宣言配列種にパイプを配置し、上記のコードは標準的なフォーマットで表され、このtransformメソッド種ですべて実行され、最終結果を返します.配列のセットを宣言しました:[1,2,3,4,5]ngForでliリストにレンダリングされます.
パイプと変更検出
demoとパイプを改造する:

import { Pipe, PipeTransform } from '@angular/core';
import { isNumber } from 'util';
@Pipe({ name: 'expandData' })
export class ExpandData implements PipeTransform {
  transform(data: Array | any) {
    if (data && isNumber(data)) {
      return 2 * data;
    } else if (typeof (data) !== 'string' && data.length > 0) {
      data = data.filter(o => o.value > 3);
      data.map(o => 2 * o);
      return data;
    }
  }
}

 counts = [
    { id: '0', value: 1 },
    { id: '1', value: 2 },
    { id: '2', value: 3 },
    { id: '3', value: 4 },
    { id: '4', value: 5 }
  ];
  randomChange() {
    this.counts[Math.round(4 * Math.random())].value = Math.round(10 * Math.random());
  }

  {{counts|json}}
  

    

      {{count.value}}
    
  
            

実際のデータのうち3より大きいものは2つを超えていますが、ページでは2つのデータがレンダリングされます.
ここでは、リストとそのサブアイテムに対する変更を無視する別の変更検出アルゴリズムを使用します.Angularの更新を通知するためには,データの再置換が必要であり,解体は効率的なスキームである.
ひじゅんかんろ
Angularは各構成部品の変更検出周期において非純ダクトを実行する.非純粋なパイプは、各キーやマウスの移動と同じように頻繁に呼び出されることがあります.
この弦を頭の中に張るには、非純粋なパイプを慎重に実現しなければならない.高価で鈍いパイプは、ユーザーの体験を破壊します.
じゅんかんろ
Angularは、入力値に純粋な変更が発生したことを検出した場合にのみ、純粋なパイプを実行します.純変更とは、元のタイプの値(String、Number、Boolean、Symbol)またはオブジェクト参照(Date、Array、Function、Object)への変更です.

import { Pipe, PipeTransform } from '@angular/core';
import { isNumber } from 'util';
@Pipe({ name: 'expandData',pure:false })
export class ExpandData implements PipeTransform {
  transform(data: Array | any) {
    if (data && isNumber(data)) {
      return 2 * data;
    } else if (typeof (data) !== 'string' && data.length > 0) {
      data = data.filter(o => o.value > 3);
      data.map(o => 2 * o);
      return data;
    }
  }
}