脚本宝典收集整理的这篇文章主要介绍了Angular4学习笔记之管道，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
简介
管道 PiPEs 把数据作为输入，然后转换它，给出期望的输出。
每个应用开始的时候差不多都是一些简单任务：获取数据、转换它们，然后把它们显示给用户。
内置管道
Angular内置了一些管道，比如 DatePipe、UpperCasePipe、LowerCasePipe、CurrencyPipe和PercentPipe。它们全都可以直接用在任何模板中。
大小写转换管道
uppercase 将字符串转换为大写
lowercase 将字符串转换为小写
例如：
html 代码：
<p>将字符串转换为大写{{str | uppercase}}</p>
ts 代码：
str:string = 'hello'
界面显示：
将字符串转换为大写HELLO
小数管道
number 用来将数字处理为我们需要的小数格式
接收的参数格式为 {最少整数位数}.{最少小数位数}-{最多小数位数}
最少整数位数默认为 1
最少小数位数默认为 0
最多小数位数默认为 3
当小数位数 少于 规定的 {最少小数位数} 时，会自动补 0
当小数位数 多于 规定的 {最多小数位数} 时，会四舍五入
例如：
html 代码：
<p>圆周率是{{pi | number:'2.2-4'}}</p>
ts 代码：
pi:number = 3.14159;
界面显示：
圆周率是 03.1416
货币管道
currency 管道用来将数字转换为货币格式
例如：
html 代码：
<p>{{a | currency:'USD':false}}</p>
<p>{{b | currency:'USD':true:'4.2-2'}}</p>
ts 代码：
a:number = 8.2515
b:number = 156.548
界面显示：
USD8.25
$0,156.55
日期管道
currency 管道用来将数字转换为货币格式
例如：
html 代码：
<div>我的生日是{{birthday | date : "yyyy-MM-dd"}}</div>
ts 代码：
birthday: Date = new Date('2018-01-03');
界面显示：
我的生日是2018-01-03
管道可能接受任何数量的可选参数来对它的输出进行微调。
我们可以在管道名后面添加一个冒号( : )再跟一个参数值，来为管道添加参数(比如currency:'EUR')。 如果我们的管道可以接受多个参数，那么就用冒号来分隔这些参数值。
例如：
<div>我的生日是{{birthday | date : "yyyy-MM-dd"}}</div>
<p>{{a | currency:'USD':false}}</p>
我们可以把管道链在一起，以组合出一些潜在的有用功能。
下面这个例子中，我们把birthday链到DatePipe管道，然后又链到UpperCasePipe，这样我们就可以把生日显示成大写形式了。
The chained hero's birthday is {{ birthday | date | uppercase}}
准备工作
新建一个 名字叫做 forMATEPipe 的管道
使用命令行工具：ng g pipe pipe/formatePipe
注意
管道的声明是需要加入到 app.moduel.ts 的 元数据中 declarations
FormatePipePipe 类
import { Pipe, PipeTransform } From '@Angular/core';
@Pipe({
name: 'formatePipe'
})
export class FormatePipePipe implements PipeTransform {
transform(value: any, args?: any): any {
return null;
}
}源码解释：
@Pipe({
name: 'formatePipe'
})@Pipe语法糖是告诉 angular 当前的类是一个 管道
name 的值是：我们使用管道的时候的模版表达式的标识符。这个名字是可以任意定义的。
transform(value: any, args?: any): any {
return null;
}transform 方法
value： 是传入的值
args： 是传入的格式化的值
例如：
<div>我的生日是{{birthday | date : "yyyy-MM-dd"}}</div>
date 是 name 的值
birthday 是 value
"yyyy-MM-dd" 是 args
修改管道的方法
transform(value: String, args: String): any {
if( !args ){
return value;
}
return args +""+ value;
}
使用管道
html 代码：
<p>自定义的管道 {{price | formatePipe: '￥'}}</p>
ts 代码：
price: number = 3.13456537;
界面显示：
自定义的管道 ￥3.13456537以上是脚本宝典为你收集整理的Angular4学习笔记之管道全部内容，希望文章能够帮你解决Angular4学习笔记之管道所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。