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