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>
