Angular2의 사용자 정의 파이프 형식 데이터 사용 정보

이 글은 주로 Angular2 파이프라인 Pipe와 Custom Pipe 형식 데이터의 사용법을 소개하며, Angular2 파이프라인과 Pure Pipeline의 관련 개념, 구문 및 사용 기술을 자세히 분석하여 필요한 친구들이 참고할 수 있습니다. 이 문서에서는 파이프 및 사용자 정의 파이프 형식 데이터 사용을 예로 들어 Angular2를 설명합니다. 참조용으로 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.

Pipe는 개발자의 희망에 따라 데이터 형식을 지정할 수 있으며 여러 파이프라인을 직렬로 연결할 수도 있습니다.

Pure Pipe와 Impure PipePipeline은 Pure Pipe와 Impure Pipe로 구분됩니다. 기본적으로 파이프는 순수합니다. 사용자 정의 파이프를 선언할 때 순수 플래그를 false로 설정하면 파이프가 순수하지 않다는 의미입니다. 예:

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

순수 파이프라인과 비순수 파이프라인의 차이점:

① 순수 파이프라인:

Angular는 입력 값의 순수 변경을 감지한 경우에만 순수 파이프라인을 실행합니다. 순수 변경은 원래 유형 값(

String

, Number, Boolean, Symbol)의 변경 또는 객체 참조의 변경(객체 값의 변경은 순수 변경이 아니므로 실행되지 않음)을 의미합니다. ).② 불순한 파이프라인

Angular는 각 구성 요소의 변경 감지 주기 동안 불순한 파이프라인을 실행합니다. 따라서 불순한 파이프를 사용하는 경우 성능 문제에 주의해야 합니다.

파이프 사용 구문

{{표현식 파이프 : arg}}

체인 연결인 경우:{{expression | pipe : arg}}

如果是链式串联:

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

{{표현식 | 파이프1 : arg | }

일반적으로 사용되는 내장 파이프

PipelinetypefunctionDatePipe순수 파이프날짜 형식 지정 JsonPipe비 순수 파이프JSON.stringify()를 사용하여 객체를 json 문자열로 변환UpperCasePipe순수 파이프텍스트의 모든 문자를 대문자로 변환LowerCasePipe순수 파이프 텍스트 변환 안의 모든 문자는 소문자로 변환됩니다DecimalPipePure Pipe숫자 형식 지정CurrencyPipePure PipeCurrency 형식 지정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 중국어 웹사이트의 기타 관련 기사를 참조하세요!