php+管道+pipe管道,angular2+管道pipe

一.什么是Pipe?

就是管道，简单来说，管道的作用就是传输。并且不同的管道具有不同的作用。(其实就是处理数据)

二.pipe用法

{{ 输入数据 | 管道 : 管道参数}}  (其中‘|’是管道操作符)

三.Angular自带的pipe函数

管道功能

DatePipe  日期管道，格式化日期

JsonPipe  将输入数据对象经过JSON.stringify()方法转换后输出对象的字符串

UpperCasePipe  将文本所有小写字母转换成大写字母

LowerCasePipe  将文本所有大写字母转换成小写字母

DecimalPipe  将数值按照特定的格式显示文本

CurrentcyPipe  将数值进行货币格式化处理

SlicePipe  将数组或者字符串裁剪成新子集

PercentPipe  将数值转百分比格

四、简单应用

1、声明一个管道ts，用于进行运算( name.pipe.ts )

// 导入模块

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

// 管道名称

@Pipe({

name: "name"

})

export class NamePipe implements PipeTransform {

// 参数说明:

// value是在使用管道的时候,获取的所在对象的值

// 后面可以跟若干个参数

// arg: 自定义参数, 数字类型, 使用的时候, 使用冒号添加在管道名称后面

transform(value:number, arg:number) {

return value * 10 * arg;

}

}

2、在app.module.ts主模块中引入管道

import { name} from "../pipe/name.pipe";

@ngModule({

declarations: [

name

]

})

3、组件模板中使用

@Pipe管道的例子

{{ number | name: 10 }}