angular2+管道pipe

发布时间：2019-02-21 14:49:47 修改时间：2019-02-21 14:49:47 阅读：6104 评论：0 0

一.什么是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、组件模板中使用

<p>@Pipe管道的例子</p>

<p>

    <input type="text" [(ngModel)]="number" name="number" class="form-control"/>

</p>

<!-- 不仅获取当前值，而且传递了一个参数，使用冒号添加到后面 -->

<p>{{ number | name: 10 }}</p>

---