免费做橙光封面的网站,中企动力温州分公司官网,企业方案项目策划书怎么写,网站建设中 模板下载本文转自#xff1a;https://www.pocketdigi.com/20170209/1563.html 管道(Pipe)可以根据开发者的意愿将数据格式化#xff0c;还可以多个管道串联。 纯管道(Pure Pipe)与非纯管道(Impure Pipe) 管道分纯管道(Pure Pipe)和非纯管道(Impure Pipe)。默认情况下#xff0c;管道…本文转自https://www.pocketdigi.com/20170209/1563.html 管道(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或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 sexReformangular-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 { datenew Date(); money5.9372; object{title:ffff,subTitle:subtitlefff}; strabcdABCD; percent0.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 © 2017, 冰冻鱼. 请尊重作者劳动成果复制转载保留本站链接! 应用开发笔记转载于:https://www.cnblogs.com/freeliver54/p/9728309.html
