第六章 管道

1.Angular4中常用管道

（1）大小写转换管道

uppercase将字符串转换为大写 ，lowercase将字符串转换为小写

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

str:string = 'hello'

（2）日期管道
date，日期管道符可以接受参数，用来规定输出日期的格式。

<p>现在的时间是{{today | date:'yyyy-MM-dd HH:mm:ss'}}</p>

today:Date = new Date();

（3）小数管道

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

当小数位数多于规定的{最多小数位数}时，会四舍五入

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

pi:number = 3.14159;  //圆周率是03.1416

2.自定义管道

ng g pipe pipe/mutipipe

在putiple.pipe.ts中编写管道规则

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'mutiple'
})
export class MutiplePipe implements PipeTransform {
   //value 输入值 ，args:参数
  transform(value: any, args?: any): any {
    if(!args){
        args=1
    }
    return value*args;
  }

}

记得在主模块app.module.ts中声明该管道

@NgModule({
  declarations: [
    AppComponent,
    TemplateFormComponent,
    MutiplePipe
  ],

在模板中使用该管道

{{size|mutiple:2}}

size:number=7;   //最终结果输出14