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的更多相关文章

  1. angular2 pipe实现搜索结果中的搜索关键字高亮

    效果图如下 1.声明一个pipe import {Pipe, Injectable, PipeTransform} from '@angular/core';import { DomSanitizer ...

  2. 4、Angular2 pipe

    1. stateless pipe 2.stateful pipe

  3. [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 ...

  4. [Angular 2] Pipe Purity

    Explaining how Pipes only change by default when your Pipe input parameters change and not when your ...

  5. ASP.NET MVC和Web API中的Angular2 - 第2部分

    下载源码 内容 第1部分:Visual Studio 2017中的Angular2设置,基本CRUD应用程序,第三方模态弹出控件 第2部分:使用Angular2管道进行过滤/搜索,全局错误处理,调试客 ...

  6. [Angular 2] Pipes with Multiple Parameters

    Showing how to set up a Pipe that takes multiple updating inputs for multiple Component sources. imp ...

  7. [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 ...

  8. 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 ...

  9. ionic2 目录

    首先 ionic2 暂时找不到中文文档.本人英语又很渣.无奈之下只能依赖于百度翻译.完全是已自己理解的方式运作 ,可能里面会有一些偏差之类的 不过我都测试过代码是可以跑通的 只不过讲解的部分可能... ...

随机推荐

  1. Charles 抓取 iphone https的设置方式

    1. Charles:  help > SSL Proxying > Install Charles Root Certificate, 2. 将会打开 钥匙串访问 的功能,查找 Char ...

  2. jsonp/ajax 自己的一些总结

    data.json代码:[{"name": "张三", "age": 18}, {"name": "李四&qu ...

  3. C# 利用log4net 把日志写入到数据库表中

    效果图: 1:第一步创建SQL表结构  CREATE TABLE [dbo].[LogDetails] (  [LogID] int NOT NULL IDENTITY(1,1) ,  [LogDat ...

  4. [javaSE] 集合框架(Map概述)

    Map集合,将key对象映射到value对象 三个主要的子类:Hashtable,HashMap,TreeMap Hashtable:底层是哈希表数据结构,不允许使用null值,线程同步 HashMa ...

  5. vertical-align属性baseline(转)

    图7-34 文字和图片内容默认垂直对齐方式为基线对齐 上一小节讲解了行高与单行纯文字的垂直居中,而如果行内含有图片和文字,在浏览器内浏览时,读者可以发现文字和图片在垂直方向并不是沿中线居中,而是沿基线 ...

  6. 01 使用Git基本方法

    什么是Git? Git是目前世界上最先进的分布式版本控制系统(没有之一). 你得先有一个Git仓库,才能进行操作.创库就是Git存放你要保存的快照的数据的地方. 拥有一个Git仓库,有两种方法. 创建 ...

  7. K:栈和队列的比较

    栈和队列的相同点: 都是线性结构,即数据元素之间具有"一对一"的逻辑关系 都可以在顺序存储结构和链式存储结构上进行实现 在时间代价上,插入和删除操作都需常数时间:在空间代价上,情况 ...

  8. Redis概述与安装

    一.什么是Redis ​ 由c语言编写的,以键值对的形式存储的数据库. 缓存技术(驻留在内存中) ​ key:value ​ 支持5种数据类型: ​ String ​ Hash(哈希表) ​ list ...

  9. C++输入输出流--<iostream>详解

    C++输入输出流包含在头文件<iostream>中, 流的定义如下:通过设备驱动程序与键盘.屏幕.文件.打印机等进行交互, iostream 类提供与之交互的方法.输出流:输出流的对象是字 ...

  10. UOJ46. 【清华集训2014】玄学

    传送门 Sol 考虑对于操作时间建立线段树,二进制分组 那么现在主要的问题就是怎么合并信息 你发现一个性质,就是每个修改只会在整个区间内增加两个端点 那么我们二进制分组可以得到每个区间内最多只有区间长 ...