【Angular 4】管道

管道简介?

在开发过程中，有时我们会面临数据获取之后无法直接使用，但如果通过代码手动转换又面临性能尴尬的问题。
Angular为了解决这一类问题，产生了管道这一概念。所谓管道，就是将获取到的数据转换之后通过视图呈现出来的一种工具。这是Angular框架的特性，因此不会存在所谓的性能问题。Angular内置了一些常用管道，例如：DatePipe、UpperCasePipe、LowerCasePipe、CurrencyPipe和PercentPipe。

管道使用?

1、日期管道?

import { Component } from '@angular/core';
@Component({
  selector: 'app-hero-birthday',
  template: `<p>{{ birthday }}</p>`
})
export class HeroBirthdayComponent {
  birthday = new Date(2019, 5, 5); 
}

  使用管道前?

// 不使用管道时，显示：
Sun May 5 2019 00:00:00 GMT+0800 (中国标准时间)

  使用管道后?

<p>{{ birthday | date }}</p>
// May 5, 2019

2、参数化管道?
例1中使用的是date管道来进行时间转换，有默认的转换格式。同样的，也可以自定义转换格式，只需要向data管道中传递参数就可以了。
如：我们想要一种这样的格式 2019/05/05

<p>{{ birthday | date:"yyyy/MM/dd" }}</p>

3、大小写转换管道?

⭐uppercase?将字符串转换为大写 

⭐lowercase?将字符串转换为小写

<p>将字符串转换为大写{{ str | uppercase }}</p>

str:string = 'hello';

页面会显示：将字符串转换为大写HELLO

4、小数管道?
number管道用来将数字处理为我们需要的小数格式。
接收的参数格式为 → {最少整数位数}.{最少小数位数}-{最多小数位数}
其中，
{最少整数位数}默认为1
{最少小数位数}默认为0
{最多小数位数}默认为3
当小数位数 少于 规定的{最少小数位数}时，会自动补0
当小数位数 多于 规定的{最多小数位数}时，会四舍五入

<p>圆周率是{{ pi | number:'2.2-4' }}</p>

pi:number = 3.14159;

页面会显示：圆周率是03.1416

5、货币管道?
currency管道用来将数字转换为货币格式

<p>{{ a | currency:'USD':false }}</p>
<p>{{ b | currency:'USD':true:'4.2-2' }}</p>

a:number = 8.2515
b:number = 156.548

页面会显示：USD8.25。
0156.55这里的′USD′是美元UnitedStatesdollar的缩写，当为false时不显示符，当为true时，则显示 $ 符。后面的规定小数位数的参数和上面介绍的一样。