Angular2中文官网：https://www.angular.cn/guide/quickstart
Angular2中的管道@Pipe即是模板中对数据的变换机制，作用和AngularJS中的过滤器filter一样
Angular2内置管道，以及Angular官方的介绍
- 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}}
<span style="color: #008000">//
<span style="color: #008000"> 导入模块import {Pipe,PipeTransform} <span style="color: #0000ff">from <span style="color: #800000">"<span style="color: #800000">@angular/core<span style="color: #800000">"<span style="color: #000000">;
<span style="color: #008000">//<span style="color: #008000"> 管道名称
<span style="color: #000000">@Pipe({
name: <span style="color: #800000">"<span style="color: #800000">calculatePipe<span style="color: #800000">"<span style="color: #000000">
})
export <span style="color: #0000ff">class<span style="color: #000000"> CalculatePipe implements PipeTransform {
<span style="color: #008000">/<span style="color: #008000">参数说明:
value是在使用管道的时候,获取的所在对象的值
后面可以跟若干个参数
* arg: 自定义参数,数字类型,使用的时候,使用冒号添加在管道名称后面
<span style="color: #008000">/<span style="color: #000000">
transform(value:number,arg:number) {
<span style="color: #0000ff">return value <span style="color: #800080">10 *<span style="color: #000000"> arg;
}
}
主模块中声明
...
import { CalculatePipe } <span style="color: #0000ff">from <span style="color: #800000">"<span style="color: #800000">../pipe/calculate.pipe<span style="color: #800000">"<span style="color: #000000">;
@ngModule({
declarations: [
CalculatePipe
]
})
...
import { CalculatePipe } <span style="color: #0000ff">from <span style="color: #800000">"<span style="color: #800000">../pipe/calculate.pipe<span style="color: #800000">"<span style="color: #000000">;
@ngModule({
declarations: [
CalculatePipe
]
})
...
模板中使用
@Pipe管道的例子
[(ngModel)]= name= =/>
{{ number | calculatePipe : }}
相关文章
ANGULAR.JS:NG-SELECTANDNG-OPTIONSPS:其实看英文文档比看中...
AngularJS中使用Chart.js制折线图与饼图实例 Chart.js 是...
IE浏览器兼容性后续前言 继续尝试解决IE浏览器兼容性问题，...
Angular实现下拉菜单多选写这篇文章时，引用文章地址如下：h...
在AngularJS应用中集成科大讯飞语音输入功能前言 根据项目...
Angular数据更新不及时问题探讨前言 在修复控制角标正确变...