Angular2-管道

Posted 2020-10-23 pei~乐悠悠

Angular2中文官网：https://www.angular.cn/guide/quickstart

Angular2中的管道@Pipe即是模板中对数据的变换机制，作用和AngularJS中的过滤器filter一样

Angular2内置管道，以及Angular官方的介绍

Pipe	Usage	Example
DatePipe	date	{{ dateObj | date }} // output is ‘December 8, 2017’
UpperCasePipe	uppercase	{{ value | uppercase }} // output is ‘SOME TEXT’
LowerCasePipe	lowercase	{{ value | lowercase }} // output is ‘some text’
CurrencyPipe	currency	{{ 30.00 | currency:’USD’:true }} // output is ‘$30’
PercentPipe	percent	{{ 0.1 | percent }} //output is 10%

• DecimalPipe:  {{value| number:‘2.2-2‘}}
• DatePipe:  {{value| date:‘yyMMdd‘}}
• JsonPipe:  {{value| json }} 基于JSON.stringify(), 主要用于调试
• PercentPipe: {{value| percent:‘1.2-3‘}}
• SlicePipe:  {{value | slice:1:4}}
• UpperCasePipe:    {{value| uppercase}}
• LowerCasePipe:  {{value | lowercase}}

当然也可以自定义管道
1、声明一个管道

/**声明一个管道ts，用于进行运算
** calculate.pipe.ts 
**/

// 导入模块
import {Pipe, PipeTransform} from "@angular/core";
// 管道名称
@Pipe({
        name: "calculatePipe" 
    })
export class CalculatePipe implements PipeTransform {
  /**参数说明:
  ** value是在使用管道的时候,获取的所在对象的值
  ** 后面可以跟若干个参数
  ** arg: 自定义参数, 数字类型, 使用的时候, 使用冒号添加在管道名称后面
  **/
  transform(value:number, arg:number) {
    return value * 10 * arg;
  }
}

主模块中声明

/**在app.module.ts主模块中声明管道**/

...
import { CalculatePipe } from "../pipe/calculate.pipe";
@ngModule({
    declarations: [
        CalculatePipe 
    ]
})
...

模板中使用

/**组件模板中使用**/

<p>@Pipe管道的例子</p>
<p>
    <input type="text" [(ngModel)]="number" name="number" class="form-control"/>
</p>
<!-- 不仅获取当前值，而且传递了一个参数，使用冒号添加到后面 -->
<p>{{ number | calculatePipe : 10 }}</p>