Anglar 2パイプラインPipeおよびカスタム配管フォーマットデータの使用例分析

本明細書の例は、Anglar 2パイプラインPipeおよびカスタムパイプラインフォーマットデータの使用法を説明する。皆さんに参考にしてあげます。具体的には以下の通りです。
パイプライン（Pipe）は、開発者の意思に応じてデータをフォーマットすることができ、複数のパイプを直列に接続することもできます。
純配管（Pure Pipe）と非純配管（Impure Pipe）
パイプラインは純パイプライン（Pure Pipe）と非純パイプライン（Impure Pipe）に分けられます。デフォルトでは、パイプラインはすべて純で、カスタマイズしたパイプラインステートメントの時にpurマークをfalseにします。つまり、非純粋なパイプラインです。例えば:

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

純配管と非純配管の違い：
①純配管：
Anglarは入力値が純粋に変更されたことを確認した場合のみ、純配管を実行します。純粋な変更とは、元のタイプ値（String，Number，Boolean，Symbol）の変更またはオブジェクト参照の変更（オブジェクト値の変更は純粋な変更ではなく、実行されません）です。
②純配管ではない
アングラーは、各コンポーネントの変更検出周期において、非純粋な配管を実行します。ですから、非純配管を使うなら、性能に注意しなければなりません。
パイプの使用法{{expression | pipe : arg}}チェーンの場合：{{expression | pipe1 : arg | pipe2 | pipe3 }}常に配管を内蔵しています
パイプ
タイプ
機能
DatePipe
純パイプ
日付の書式設定
Json Pipe
むじん管
JSON.strigifyを使ってオブジェクトをJson文字列に変換します。
UpperCasePipe
純パイプ
テキスト中の文字をすべて大文字に変換します。
LowerCasePipe
純パイプ
テキストのアルファベットをすべて小文字に変換します。
Decimal Pipe
純パイプ
数値書式設定
CurrencyPipe
純パイプ
通貨書式
PercentPipe
純パイプ
パーセンテージフォーマット
SlicePipe
むじん管
配列または文字列カット
DatePipe
文法：{{expression | date:format}}expressionは日付オブジェクト、日付文字列、ミリ秒タイムスタンプをサポートします。formatは指定されたフォーマットで、よく使われる記号です。
y年yは4桁の数字を使って年（2017）を表し、yyは2桁の数字を使って表しています（17）
M月M 1桁または2桁の数字（2または10、11、12）、MM 2桁の数字は、前の0を補う（02）
d日d一桁または二桁の数字（9）dd二桁の数字で、前は0を補う（09）
E周EEEの3桁の字母の略語のEEEE曜日のフルネーム。
j 12時間制時間j（9 AM）jj（09 AM）
h 12時間制時間h(9)hh(09)
H 24時間制時間H（9）HH（09）
m分割m(5)mm(05)
s秒s(1)ss(01)
zタイムゾーンz China Standard Time
Decimal Pipe
文法：{{expression | number[: digiInfo] }}digiInfoフォーマット:{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}つまり、整数ビットは最小桁数を保持します。小数位は最小桁数を保持します。小数位は最大保持位置を維持します。
標準値：1.0-3
CurrencyPipe
文法：{{expression | currency[: currencyCode[: symbolDisplay[: digiInfo]]] }}digiInfoフォーマットはDecimal Pipeと同じで、もう説明しません。
currencyCodは通貨コードを指し、その値はISO 4217標準、人民元CNY、ドルUSD、ユーロEURです。
smbol Displayはブール値で、trueは通貨記号（￥）falseを表示して通貨コードを表示します。
PercentPipe
文法：{{expression | percent[: digiInfo] }}digiInfoフォーマットはDecimal Pipeと同じで、もう説明しません。
SlicePipe
文法：{{expression | slice: start [: end] }}expressionは文字列または配列であってもよい。文字列の場合、このパイプはString.prototype.slice()メソッドを呼び出して、サブストリングを切り取ります。配列の場合、Array.prototype.slice()を呼び出して、配列のサブ要素を取る。
カスタムパイプ
内蔵のパイプを使うだけでなく、カスタムパイプでより複雑な機能を実現できます。
コンジットを作成:ng g pipe sexReformアングラーcliはSexReformPipeパイプを作成してくれます。このパイプの機能はmale、femaleによって中国語の男性、女性に戻ります。
コード:

import {Pipe, PipeTransform} from '@angular/core';
@Pipe({
 name: 'sexReform',
 //    
 pure:false
})
export class SexReformPipe implements PipeTransform {
 transform(value: any, args?: any): any {
  let chineseSex;
  switch (value) {
   case 'male':
    chineseSex = ' ';
    break;
   case 'female':
    chineseSex = ' ';
    break;
   default:
    chineseSex = '    ';
    break;
  }
  return chineseSex;
 }
}

ポイントはPipeTrans formインターフェースを実現するためのtransform方法であり、非純粋なパイプラインをデモンストレーション用に定義し、非純粋なパイプラインは性能に大きな影響を与えるので、できるだけ避ける。
デモコード
コンポーネント:

import { Component, OnInit } from '@angular/core';
@Component({
 selector: 'app-pipe',
 templateUrl: './pipe.component.html',
 styleUrls: ['./pipe.component.css']
})
export class PipeComponent implements OnInit {
 date=new Date();
 money=5.9372;
 object={title:'ffff',subTitle:'subtitlefff'};
 str='abcdABCD';
 percent=0.97989;
 constructor() { }
 ngOnInit() {
 }
}

テンプレート:

<p>
 {{date| date:'y-MM-dd HH:mm:ss'}} <br />
 {{object| json }} <br />
 {{str| uppercase }} <br />
 {{str| lowercase }} <br />
 {{money| number:'2.4-10' }} <br />
 {{money| number:'5.1-2' }} <br />
 {{money| currency:'CNY':false:'1.1-2' }} <br />
 {{percent| percent:'1.1-2' }} <br />
 {{str| slice:1:3 }} <br />
 {{'female'| sexReform }} <br />
</p>

AnglarJSに関する詳細について興味がある読者は、このサイトのテーマを見ることができます。「AnglarJS指令操作テクニックのまとめ」、「AnglarJS入門と上級教程」および「アングラルJS MVCアーキテクチャのまとめ」
この記事で皆さんのAnglarJSプログラムの設計に役に立ちますように。