Informationen zur Datennutzung im benutzerdefinierten Pipe-Format in Angular2

Dieser Artikel stellt hauptsächlich die Verwendung von Angular2-Pipeline- und benutzerdefinierten Pipeline-Formatdaten vor. Er analysiert die zugehörigen Konzepte, Syntax- und Verwendungsfähigkeiten der Angular2-Pipeline und der reinen Pipeline im Detail in Form von Beispielen

Die Beispiele in diesem Artikel beschreiben die Verwendung von Angular2-Pipeline-Pipe- und benutzerdefinierten Pipe-Formatdaten. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Pipe kann Daten gemäß den Wünschen des Entwicklers formatieren und auch mehrere Pipes in Reihe schalten.

Reine Pfeife und unreine Pfeife

Pipeline ist in reine Pfeife und unreine Pfeife (unreine Pfeife) unterteilt. Standardmäßig sind Pipes rein. Wenn Sie beim Deklarieren einer benutzerdefinierten Pipe das Pure-Flag auf false setzen, bedeutet dies, dass die Pipe nicht rein ist. Zum Beispiel:

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

Der Unterschied zwischen reinen Rohren und unreinen Rohren:

① Reine Rohre:

Angular erkennt nur reine Änderungen im Eingabewert , reine Pipeline wird ausgeführt. Reine Änderungen beziehen sich auf Änderungen in primitiven Typwerten (String,Number,Boolean,Symbol) oder Änderungen in Objektreferenzen (Objektwertänderungen sind keine reinen Änderungen und werden nicht ausgeführt).

② Unreine Pipeline

Angular führt unreine Pipelines im Änderungserkennungszyklus jeder Komponente aus. Wenn wir unreine Rohre verwenden, müssen wir daher auf Leistungsprobleme achten.

Pipe-Nutzungssyntax

{{expression | pipe : arg}}

Wenn es sich um eine Kettenverkettung handelt:

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

Häufig verwendete Einbaurohre

管道	类型	功能
DatePipe	纯管道	日期格式化
JsonPipe	非纯管道	使用JSON.stringify()将对象转成json字符串
UpperCasePipe	纯管道	将文本中的字母全部转在大写
LowerCasePipe	纯管道	将文本中的字母全部转成小写
DecimalPipe	纯管道	数值格式化
CurrencyPipe	纯管道	货币格式化
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如何实现无缝滚动组件

Das obige ist der detaillierte Inhalt vonInformationen zur Datennutzung im benutzerdefinierten Pipe-Format in Angular2. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!