Angular2 Pipe
AngularJs 1.x 中使用filters来帮助我们转换templates中的输出,但在Angular2中使用的是pipes,以下展示Angular 1.x and Angular 2中filter和pipe的对比:
Filter/Pipe Name | Angular 1.x | Angular 2 |
---|---|---|
currency | ✓ | ✓ |
date | ✓ | ✓ |
uppercase | ✓ | ✓ |
json | ✓ | ✓ |
limitTo | ✓ | ✓ |
lowercase | ✓ | ✓ |
number | ✓ | |
orderBy | ✓ | |
filter | ✓ | |
async | ✓ | |
decimal | ✓ | |
percent | ✓ |
Basic Pipes
// app.ts // <reference path="typings/angular2/angular2.d.ts" /> import {Component, View, bootstrap} from 'angular2/angular2'; @Component({
selector: 'pipes'
})
@View({
templateUrl: 'pipesTemplate.html'
})
// Component controller
class PipesAppComponent {
date: Date; constructor() {
this.date = new Date();
}
} bootstrap(PipesAppComponent);
<!-- pipesTemplate.html -->
<h1>Dates</h1>
<!-- Sep 1, 2015 -->
<p>{{date | date:'mediumDate'}}</p>
<!-- September 1, 2015 -->
<p>{{date | date:'yMMMMd'}}</p>
<!-- 3:50 pm -->
<p>{{date | date:'shortTime'}}</p>
结果:
New Pipes
decimal和percent是Angular2中新增的管道,参数规则是:{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}
.
decimal管道在模板中使用number关键字
// app.ts ... @View({
templateUrl: 'pipesTemplate.html'
}) class PipesAppComponent {
grade: number;
rating: number; constructor() {
this.grade = 0.99;
this.rating = 9.1243;
}
} ...
html
<h1>Decimals/Percentages</h1>
<!-- 99.00% -->
<p>{{grade | percent:'.2'}}</p>
<!-- 09.12 -->
<p>{{rating | number:'2.1-2'}}</p>
结果:
Async Pipe
Angular 2's async
allows us to bind our templates directly to values that arrive asynchronously. This ability is great for working with promises and observables.
// app.ts ... @Component({
selector: 'pipes',
changeDetection: 'ON_PUSH'
})
@View({
templateUrl: 'pipesTemplate.html',
}) class PipesAppComponent {
promise: Promise; constructor() {
this.promise = new Promise(function(resolve, reject) {
setTimeout(function() {
resolve("Hey, I'm from a promise.");
}, 2000)
});
}
} ...
html
<!-- pipesTemplate.html -->
<h1>Async</h1>
<p>{{ promise | async}}</p>
After a 2 second delay, the value from the resolved promise will be displayed on the screen.
Custom Pipes
自定义pipe需要使用@Pipe装饰器,并实现PipeTransform接口里的transform方法。定义好的pipe要在需使用pipe的view或component中声明。
Pipe接口的定义
export interface Pipe {
name: string;
pure?: boolean;
}
PipeDecorator
export const Pipe: PipeDecorator = <PipeDecorator>makeDecorator('Pipe', {
name: undefined,
pure: true, // 默认是pure
});
PipeTransform接口
export interface PipeTransform {
transform(value: any, ...args: any[]): any;
}
管道分类
pure 管道:仅当管道输入值变化的时候,才执行转换操作,默认的类型是 pure 类型。(备注:输入值变化是指原始数据类型如:string、number、boolean 等的数值或对象的引用值发生变化)
impure 管道:在每次变化检测期间都会执行,如鼠标点击或移动都会执行 impure 管道
// app.ts import {Component, View, bootstrap, Pipe, PipeTransform} from 'angular2/angular2'; ... // We use the @Pipe decorator to register the name of the pipe
@Pipe({
name: 'tempConvert'
})
// The work of the pipe is handled in the tranform method with our pipe's class
class TempConvertPipe implements PipeTransform {
transform(value: number, args: any[]) {
if(value && !isNaN(value) && args[0] === 'celsius') {
var temp = (value - 32) * 5/9;
var places = args[1];
return temp.toFixed(places) + ' C';
} return;
}
} ... @View({
templateUrl: 'pipesTemplate.html', // We can pass the pipe class name into the pipes key to make it usable in our views
pipes: [TempConvertPipe]
}) class PipesAppComponent {
temperature: number; constructor() {
this.temperature = 85;
}
}
html
<h1>Custom Pipes - Convert Temperature</h1>
<!-- 85 F -->
<h3>Fahrenheit: {{temperature + ' F'}}</h3>
<!-- 29.4 C -->
<h3>Celsius: {{temperature | tempConvert:'celsius':1}}</h3>
结果
过滤出指定范围的值
定义一个pipe
import {Pipe, PipeTransform} from 'angular2/core'; // Tell Angular2 we're creating a Pipe with TypeScript decorators
@Pipe({
name: 'AgePipe'
})
export class AgePipe implements PipeTransform { // Transform is the new "return function(value, args)" in Angular 1.x
transform(value, args?) {
// ES6 array destructuring
let [minAge, maxAge] = args;
return input.filter(person => {
return person.age >= +minAge && person.age <= +maxAge;
});
} }
import {Component} from 'angular2/core';
import {AgePipe} from './pipes/age-pipe/age-pipe'; @Component({
selector: 'playground-app',
templateUrl: 'app/playground.html',
// tell our component it uses our AgePipe
pipes: [AgePipe]
})
export class PlaygroundApp {
sliderValue:number = 20;
anotherSliderValue: number = 90; people:Array<any> = [{
name: 'Justin Bieber',
age: 21
}, {
name: 'Miley Cyrus',
age: 23
}, {
name: 'John Legend',
age: 37
}, {
name: 'Betty White',
age: 94
}, {
name: 'Roger Waters',
age: 72
}, {
name: 'Larry Page',
age: 42
}];
}
html
<div>
<p>
0
<input type="range" min="0" max="100"
[value]="sliderValue"
(input)="sliderValue = $event.target.value" />
100
</p>
<span>{{ sliderValue }}</span>
<p>
0
<input type="range" min="0" max="100"
[(ngModel)]="anotherSliderValue" />
100
</p>
<span>{{anotherSliderValue }}</span>
<ul>
<li *ngFor="#person of people | AgePipe:sliderValue:anotherSliderValue">
{{ person.name }} ({{ person.age }})
</li>
</ul>
</div>
Angular2 Pipe的更多相关文章
- angular2 pipe实现搜索结果中的搜索关键字高亮
效果图如下 1.声明一个pipe import {Pipe, Injectable, PipeTransform} from '@angular/core';import { DomSanitizer ...
- 4、Angular2 pipe
1. stateless pipe 2.stateful pipe
- [Angular 2] Create a simple search Pipe
This lesson shows you how to create a component and pass its properties as it updates into a Pipe to ...
- [Angular 2] Pipe Purity
Explaining how Pipes only change by default when your Pipe input parameters change and not when your ...
- ASP.NET MVC和Web API中的Angular2 - 第2部分
下载源码 内容 第1部分:Visual Studio 2017中的Angular2设置,基本CRUD应用程序,第三方模态弹出控件 第2部分:使用Angular2管道进行过滤/搜索,全局错误处理,调试客 ...
- [Angular 2] Pipes with Multiple Parameters
Showing how to set up a Pipe that takes multiple updating inputs for multiple Component sources. imp ...
- [Angular 2] Using Pipes to Filter Data
Pipes allow you to change data inside of templates without having to worry about changing it in the ...
- Angular 2 to Angular 4 with Angular Material UI Components
Download Source - 955.2 KB Content Part 1: Angular2 Setup in Visual Studio 2017, Basic CRUD applicat ...
- ionic2 目录
首先 ionic2 暂时找不到中文文档.本人英语又很渣.无奈之下只能依赖于百度翻译.完全是已自己理解的方式运作 ,可能里面会有一些偏差之类的 不过我都测试过代码是可以跑通的 只不过讲解的部分可能... ...
随机推荐
- Charles 抓取 iphone https的设置方式
1. Charles: help > SSL Proxying > Install Charles Root Certificate, 2. 将会打开 钥匙串访问 的功能,查找 Char ...
- jsonp/ajax 自己的一些总结
data.json代码:[{"name": "张三", "age": 18}, {"name": "李四&qu ...
- C# 利用log4net 把日志写入到数据库表中
效果图: 1:第一步创建SQL表结构 CREATE TABLE [dbo].[LogDetails] ( [LogID] int NOT NULL IDENTITY(1,1) , [LogDat ...
- [javaSE] 集合框架(Map概述)
Map集合,将key对象映射到value对象 三个主要的子类:Hashtable,HashMap,TreeMap Hashtable:底层是哈希表数据结构,不允许使用null值,线程同步 HashMa ...
- vertical-align属性baseline(转)
图7-34 文字和图片内容默认垂直对齐方式为基线对齐 上一小节讲解了行高与单行纯文字的垂直居中,而如果行内含有图片和文字,在浏览器内浏览时,读者可以发现文字和图片在垂直方向并不是沿中线居中,而是沿基线 ...
- 01 使用Git基本方法
什么是Git? Git是目前世界上最先进的分布式版本控制系统(没有之一). 你得先有一个Git仓库,才能进行操作.创库就是Git存放你要保存的快照的数据的地方. 拥有一个Git仓库,有两种方法. 创建 ...
- K:栈和队列的比较
栈和队列的相同点: 都是线性结构,即数据元素之间具有"一对一"的逻辑关系 都可以在顺序存储结构和链式存储结构上进行实现 在时间代价上,插入和删除操作都需常数时间:在空间代价上,情况 ...
- Redis概述与安装
一.什么是Redis 由c语言编写的,以键值对的形式存储的数据库. 缓存技术(驻留在内存中) key:value 支持5种数据类型: String Hash(哈希表) list ...
- C++输入输出流--<iostream>详解
C++输入输出流包含在头文件<iostream>中, 流的定义如下:通过设备驱动程序与键盘.屏幕.文件.打印机等进行交互, iostream 类提供与之交互的方法.输出流:输出流的对象是字 ...
- UOJ46. 【清华集训2014】玄学
传送门 Sol 考虑对于操作时间建立线段树,二进制分组 那么现在主要的问题就是怎么合并信息 你发现一个性质,就是每个修改只会在整个区间内增加两个端点 那么我们二进制分组可以得到每个区间内最多只有区间长 ...