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. ORCLE报错解决(ora-01747:无效的用户.表.列,表.列)

    原因: 这个问题出现是因为表中存在关键字造成.

  2. [转]OData的初步认识 OData v4 Client Code Generator

    本文转自:http://www.cnblogs.com/1zhk/p/5356053.html What – OData是什么? OData - Open Data Protocol,是一个设计和使用 ...

  3. JavaMail获取已发送邮件

    public static void main(String args[]) { Properties props = new Properties(); // 参数配置 props.setPrope ...

  4. Miller-Rabbin随机性素数测试算法

    //**************************************************************** // Miller_Rabin 算法进行素数测试 //速度快,而且 ...

  5. CodeForces 616A(水题)

    while(t--) 最后结果t=-1 #include <iostream> #include <string> #include <cstring> #incl ...

  6. libevent学习笔记 —— 第一个程序:计时器

    用libevent写个定时器其实步骤不多: 1.初始化libevent 2.设置事件 3.添加事件 4.进入循环 由于定时事件触发之后,默认自动删除,所以如果要一直计时,则要在回调函数中重新添加定时事 ...

  7. Easyui combogrid添加toolbar

    近一段时间一直在做Easyui的一个项目.官方的资料 API有些不全,把自己遇到的解决的问题发出来希望能帮助到大家. combogrid这个控件绑定了一个DataGrid,API也没有说可以绑定Too ...

  8. python学习之老男孩python全栈第九期_day018知识点总结——正则表达式、re模块

    一. 正则表达式 正则表达式本身和python没有什么关系,就是匹配字符串内容的一种规则. 官方定义:正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符.及这些特定字符的组合,组成 ...

  9. 13 Reasons Why You Should Pay Attention to Mobile Web Performance

    Mobile is no longer on the sidelines. If you’re not already thinking mobile first, you should at lea ...

  10. 理解webpack4.splitChunks之其余要点

    splitChunks除了之前文章提到的规则外,还有一些要点或是叫疑惑因为没有找到官方文档的明确说明,所以是通过我自己测试总结出来的,只代表我自己的测试结果,不一定正确. splitChunks.ca ...