Angular2 でのカスタム パイプ形式のデータの使用について

この記事では主に Angular2 パイプライン Pipe とカスタム パイプ形式データの使用方法を紹介し、Angular2 パイプラインと純粋なパイプラインの関連する概念、構文、使用スキルをサンプルの形式で詳細に分析します。この記事では、Angular2 のパイプとカスタム パイプ形式のデータの使用法について説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

Pipe は開発者の希望に応じてデータをフォーマットでき、複数のパイプラインを直列に接続することもできます。

純粋なパイプと不純なパイプパイプラインは純粋なパイプと不純なパイプに分けられます。デフォルトでは、パイプは純粋です。カスタム パイプを宣言するときに純粋フラグを false に設定すると、パイプは純粋ではないことを意味します。例:

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

純粋なパイプラインと不純なパイプラインの違い:

① 純粋なパイプライン:

Angular は、入力値の純粋な変更を検出した場合にのみ純粋なパイプラインを実行します。純粋な変更とは、元の型の値 (

String

、Number、Boolean、Symbol) の変更、またはオブジェクト参照の変更 (オブジェクト値の変更は純粋な変更ではないため、実行されません) を指します。 ).② 不純なパイプライン

Angular は、各コンポーネントの変更検出サイクル中に不純なパイプラインを実行します。したがって、不純なパイプを使用する場合は、パフォーマンスの問題に注意を払う必要があります。

パイプの使用構文

{{expression Pipe : arg}}

チェーン連結の場合:{{expression | pipe : arg}}

如果是链式串联:

{{expression | pipe1 : arg | pipe2 | pipe3 }}

{{expression | Pipe1 : arg | Pipe3 } }

一般的に使用される組み込みパイプ

PipelinetypefunctionDatePipe純粋なパイプ日付の書式設定JsonPipe非 Pure パイプ JSON.stringify() を使用してオブジェクトを JSON 文字列に変換しますUpperCasePipePure パイプテキスト内のすべての文字を大文字に変換しますLowerCasePipePure パイプテキストを変換する 内のすべての文字が小文字に変換されますDecimalPipePure Pipe数値書式設定CurrencyPipePure Pipe通貨書式設定PercentPipe 純粋なパイプパーセント形式SlicePipe非純粋なパイプ配列または文字列の切断🎜

DatePipe

语法:{{expression | date:format}}

expression支持日期对象、日期字符串、毫秒级时间戳。format是指定的格式,常用标志符：

y 年 y使用4位数字表示年份(2017),yy使用两位数字表示(17)
M 月 M 1位或两位数字(2或10、11、12),MM 两位数字表示，前面补0(02)
d 日 d 一位或两位数字(9) dd两位数字，前面补0(09)
E 星期 EEE 三位字母缩写的星期 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

DecimalPipe

语法：{{expression | number[: digiInfo] }}

digiInfo格式:

{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}

即：整数位保留最小位数.小数位保留最小位数-小数位最大保留位置

默认值: 1.0-3

CurrencyPipe

语法：{{expression | currency[: currencyCode[: symbolDisplay[: digiInfo]]] }}

digiInfo格式与DecimalPipe相同，不再解释。

currencyCod是指货币代码，其值为ISO 4217标准，人民币CNY,美元USD,欧元 EUR.
symbolDisplay 是一个布尔值，true时显示货币符号($￥) false显示货币码

PercentPipe

语法：{{expression | percent[: digiInfo] }}

digiInfo格式与DecimalPipe相同，不再解释。

SlicePipe

语法：{{expression | slice: start [: end] }}

expression 可以是一个字符串或数组。字符串时，该管道调用String.prototype.slice()方法截取子串。如果是数组，调用Array.prototype.slice()方法取数组子元素。

自定义管道

除了使用内置的管道，还可以通过自定义管道实现更复杂的功能。

创建管道:

ng g pipe sexReform

angular-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;
 }
}

重点在于实现PipeTransform接口的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:&#39;y-MM-dd HH:mm:ss&#39;}} <br />
 {{object| json }} <br />
 {{str| uppercase }} <br />
 {{str| lowercase }} <br />
 {{money| number:&#39;2.4-10&#39; }} <br />
 {{money| number:&#39;5.1-2&#39; }} <br />
 {{money| currency:&#39;CNY&#39;:false:&#39;1.1-2&#39; }} <br />
 {{percent| percent:&#39;1.1-2&#39; }} <br />
 {{str| slice:1:3 }} <br />
 {{&#39;female&#39;| sexReform }} <br />
</p>

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

详细解读分析JavaScript代码模块

在微信小程序中如何实现点赞功能

有关JavaScript数组操作难点（详细教程）

使用vue如何实现无缝滚动组件

以上がAngular2 でのカスタム パイプ形式のデータの使用についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。