Angular 2 파이프 파이프 및 사용자 정의 파이프 형식 데이터 용법 사례 분석

이 사례 는 Angular 2 파이프 파이프 파이프 및 사용자 정의 파이프 형식 데이터 용법 을 설명 합 니 다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
파이프(Pipe)는 개발 자의 뜻 에 따라 데 이 터 를 포맷 할 수 있 고 여러 개의 파 이 프 를 연결 할 수 있 습 니 다.
순수 파이프(Pure Pipe)와 비 순수 파이프(Impure Pipe)
파 이 프 는 순수 파이프(Pure Pipe)와 비 순수 파이프(Impure Pipe)로 나 뉜 다.기본적으로 파 이 프 는 순수 합 니 다.파이프 설명 을 사용자 정의 할 때 Pure 로 고 를 false 로 설정 하면 비 순수 파이프 입 니 다.예:

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

순 파이프 와 비 순 파이프 의 차이:
① 순 관 로:
Angular 는 입력 값 이 순 변경 되 었 을 때 만 순 관 로 를 실행 합 니 다.순 변경 이란 원본 형식 값(String,Number,Boolean,Symbol)의 변경 이나 대상 이 인용 한 변경(대상 값 변경 은 순 변경 이 아니 며 실행 되 지 않 음)을 말 합 니 다.
② 비 순 관
Angular 는 모든 구성 요소 의 변경 검사 주기 에 비 순 관 을 실행 합 니 다.따라서 비 순 관 을 사용한다 면 성능 문제 에 주의해 야 한다.
파이프 사용 문법{{expression | pipe : arg}}체인 직렬 연결 이 라면:{{expression | pipe1 : arg | pipe2 | pipe3 }}상용 내장 파이프
파이프
유형
기능.
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 자리 숫자(2 또는 10,11,12),MM 두 자리 숫자 는 앞 에 0(02)을 보충 합 니 다.
d 일 d 한 자리 또는 두 자리 숫자(9)dd 두 자리 숫자,앞 에 0(09)을 보충 합 니 다.
E 요일 EEE 세 글자 줄 임 말 요일 EEE 요일 전 칭
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)
중국 표준시
DecimalPipe
문법:{{expression | number[: digiInfo] }}digiInfo 형식:{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}즉,정수 위 는 최소 자릿수 를 유지 합 니 다.작은 숫자 는 최소 자릿수 를 유지 합 니 다.-작은 숫자 는 최대 보존 위치 입 니 다.
기본 값:1.0-3
CurrencyPipe
문법:{{expression | currency[: currencyCode[: symbolDisplay[: digiInfo]]] }}digiInfo 형식 은 DecimalPipe 와 같 습 니 다.더 이상 설명 하지 않 습 니 다.
currency Cod 는 통화 코드 를 말 하 는데 그 값 은 ISO 4217 기준 이 고 인민폐 CNY,달러 USD,유로 EUR 이다.
symbol Display 는 불 값 입 니 다.true 일 때 화폐 기호($65509)false 를 표시 합 니 다.
PercentPipe
문법:{{expression | percent[: digiInfo] }}digiInfo 형식 은 DecimalPipe 와 같 습 니 다.더 이상 설명 하지 않 습 니 다.
SlicePipe
문법:{{expression | slice: start [: end] }}expression 은 문자열 이나 배열 일 수 있 습 니 다.문자열 을 사용 할 때 이 파이프 호출String.prototype.slice()방법 으로 하위 문자열 을 캡 처 합 니 다.배열 이 라면Array.prototype.slice()방법 으로 배열 의 하위 요 소 를 추출 합 니 다.
사용자 정의 파이프
내 장 된 파 이 프 를 사용 하 는 것 외 에 도 사용자 정의 파 이 프 를 통 해 더욱 복잡 한 기능 을 실현 할 수 있다.
파이프 생 성:ng g pipe sexReformangular-cli 는 우리 에 게 Sex ReformPipe 파 이 프 를 만들어 줄 것 입 니 다.이 파 이 프 는 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:'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>

AngularJS 관련 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 볼 수 있 습 니 다.AngularJS 명령 조작 기법 총화,AngularJS 입문 및 진급 강좌과AngularJS MVC 구조 총화
본 고 에서 말 한 것 이 여러분 의 AngularJS 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.