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 暂时找不到中文文档.本人英语又很渣.无奈之下只能依赖于百度翻译.完全是已自己理解的方式运作 ,可能里面会有一些偏差之类的 不过我都测试过代码是可以跑通的 只不过讲解的部分可能... ...
随机推荐
- ORCLE报错解决(ora-01747:无效的用户.表.列,表.列)
原因: 这个问题出现是因为表中存在关键字造成.
- [转]OData的初步认识 OData v4 Client Code Generator
本文转自:http://www.cnblogs.com/1zhk/p/5356053.html What – OData是什么? OData - Open Data Protocol,是一个设计和使用 ...
- JavaMail获取已发送邮件
public static void main(String args[]) { Properties props = new Properties(); // 参数配置 props.setPrope ...
- Miller-Rabbin随机性素数测试算法
//**************************************************************** // Miller_Rabin 算法进行素数测试 //速度快,而且 ...
- CodeForces 616A(水题)
while(t--) 最后结果t=-1 #include <iostream> #include <string> #include <cstring> #incl ...
- libevent学习笔记 —— 第一个程序:计时器
用libevent写个定时器其实步骤不多: 1.初始化libevent 2.设置事件 3.添加事件 4.进入循环 由于定时事件触发之后,默认自动删除,所以如果要一直计时,则要在回调函数中重新添加定时事 ...
- Easyui combogrid添加toolbar
近一段时间一直在做Easyui的一个项目.官方的资料 API有些不全,把自己遇到的解决的问题发出来希望能帮助到大家. combogrid这个控件绑定了一个DataGrid,API也没有说可以绑定Too ...
- python学习之老男孩python全栈第九期_day018知识点总结——正则表达式、re模块
一. 正则表达式 正则表达式本身和python没有什么关系,就是匹配字符串内容的一种规则. 官方定义:正则表达式是对字符串操作的一种逻辑公式,就是用事先定义好的一些特定字符.及这些特定字符的组合,组成 ...
- 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 ...
- 理解webpack4.splitChunks之其余要点
splitChunks除了之前文章提到的规则外,还有一些要点或是叫疑惑因为没有找到官方文档的明确说明,所以是通过我自己测试总结出来的,只代表我自己的测试结果,不一定正确. splitChunks.ca ...