Angular2 pipeline Pipe and custom pipeline format data usage Example Analysis, angular2pipe

Angular2 pipeline Pipe and custom pipeline format data usage Example Analysis, angular2pipe

This document describes how to use the Pipe of the Angular2 MPs queue and custom MPs queue format data. We will share this with you for your reference. The details are as follows:

Pipeline (Pipe) can format the data according to the developer's wishes, and can also concatenate multiple pipelines.

Pure Pipe and Impure Pipe)

Pipelines are divided into Pure pipelines (Pure Pipe) and non-Pure pipelines (Impure Pipe ). By default, pipelines are pure. When you define a custom pipeline declaration, set the pure flag to false, which is a non-pure pipeline. For example:

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

Differences between pure and non-pure pipelines:

① Pure pipe:

Angular performs a pure pipeline only when the input value is checked for a pure change. Pure change refers to the change of the original type value (String, Number, Boolean, Symbol) or the change of the Object Reference (the change of the object value is not a pure change and will not be executed ).

② Non-pure Pipeline

Angular performs non-pure pipelines during the change detection cycle of each component. Therefore, if you use a non-pure pipeline, you must pay attention to performance issues.

Pipeline usage syntax

{{expression | pipe : arg}}

For chained series:

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

Common built-in Pipelines

MPs queue	Type	Function
DatePipe	Pure MPs queue	Date formatting
JsonPipe	Non-pure MPs queue	Convert the object to a JSON string using json. stringify ().
UpperCasePipe	Pure MPs queue	Convert all letters in the text to uppercase letters.
LowerCasePipe	Pure MPs queue	Convert all letters in the text to lowercase letters.
DecimalPipe	Pure MPs queue	Value formatting
Currenypipe	Pure MPs queue	Currency formatting
PercentPipe	Pure MPs queue	% Formatting
SlicePipe	Non-pure MPs queue	Array or string Truncation

DatePipe

Syntax:{{expression | date:format}}

Expression supports date objects, date strings, and timestamp in milliseconds. Format is the specified format, common identifier:

Y years y uses four digits to represent the year (2017), and yy uses two digits to represent (17)
M month M 1-digit or two-digit characters (2 or 10, 11, 12), MM two-digit representation, the first fill 0 (02)
D, d, one or two digits (9) dd, two digits, add 0 (09)
E week EEE three-character abbreviation of the day of the week EEEE week full name
J 12-hour system time j (9 AM) jj (09 AM)
H 12-hour h (9) hh (09)
H 24-hour H (9) HH (09)
M: m (5) mm (05)
S second s (1) ss (01)
Z Time Zone z China Standard Time

DecimalPipe

Syntax:{{expression | number[: digiInfo] }}

DigiInfo format:

{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}

That is, the minimum number of digits to be retained. The minimum number of digits to be retained by decimal places-the maximum number of decimal places to be retained

Default: 1.0-3

Currenypipe

Syntax:{{expression | currency[: currencyCode[: symbolDisplay[: digiInfo]]] }}

The format of digiInfo is the same as that of DecimalPipe.

CurrencyCod refers to the currency code. Its value is ISO 4217 standard, CNY, USD, and EUR.
SymbolDisplay is a Boolean value. If it is true, the currency symbol ($) is displayed. If it is false, the currency code is displayed.

PercentPipe

Syntax:{{expression | percent[: digiInfo] }}

The format of digiInfo is the same as that of DecimalPipe.

SlicePipe

Syntax:{{expression | slice: start [: end] }}

Expression can be a string or array. String, the pipeline callsString.prototype.slice()Method to intercept substrings. If it is an array, callArray.prototype.slice()Method.

Custom MPs queue

In addition to using built-in pipelines, you can also use custom pipelines to implement more complex functions.

Create an MPS queue:

ng g pipe sexReform

Angular-cli will help us create the SexReformPipe pipeline. This pipeline is used to return Chinese male and female based on male and female.

Code:

Import {Pipe, PipeTransform} from '@ angular/core'; @ Pipe ({name: 'sexreform', // non-pure pipeline pure: false }) export class SexReformPipe implements PipeTransform {transform (value: any, args? : Any): any {let chineseSex; switch (value) {case 'male': chineseSex = 'male'; break; case 'female ': chineseSex = 'female'; break; default: chineseSex = 'unknown gender'; break;} return chineseSex ;}}

The focus is on implementing the PipeTransform interface's transform method, which is defined as a non-pure pipeline for demonstration only. The non-pure pipeline has a great impact on performance and should be avoided as much as possible.

DEMO code

Components:

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() { }}

Template:

<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>