Angular2 - Starter - Pipes, Custom Pipes
在Angular2 模板中,我们在显示数据时,可以使用通道将数据转换成相应的格式的值的形式来显示,而且这不改变源数据。比如,我们可以使用date通道来转换时间显示的格式: {{date | date:'yyyy-MM-dd'}} ,(1) 以下是Angular提供的基本的通道.
Pipe Name | Usage | Parameters or Effection |
currency | {{test.currency | currency }} |
1234569678 > USD1,234,569,678.00 |
date | {{test.date | date:'yyyy-MM-dd'}} |
date:'mediumDate',//Jan,9,2017 date:'shortTime',//9:36 pm |
json | {{test.json | json }} |
[object Object] > { |
uppercase | {{test.str | uppercase }} | hello pipes > HELLO PIPES |
lowercase | {{test.str1 | lowercase }} | Hello > hello |
percent | {{test.percent | percent:'.3' }} | percent:'.3'//0.25 > 25.000% |
number | {{test.decimal | number:'5.1-2' }} | number:'5.1-3'//23440.0987 > 23,440.099 |
(2) 以下自定义了一转换电话号码指定数位尾号之外的数字的Pipe, +008615527370515 > ***********70515
//tail-number-length.pipe.ts
import { Pipe,PipeTransform } from '@angular/core'; @Pipe({
//通道名称
name:'tailNumberLength',
pure:false
})
export class TailNumberLengthPipe implements PipeTransform{
transform(value: string, length:number): any {
//对源数据的转换方法
let tailNumberLength = (length === undefined ? 4 : length);
let prefixLength = value.length - tailNumberLength;
let target = '';
for(let index = 0;index < prefixLength; ++index){
target += '*';
}
target += value.substr(prefixLength);
return target;
}
}
//tail-number-length.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TailNumberLengthPipe } from './tail-number-length.pipe'; 构建一个NgModule装饰的TailNumberPipeModule
@NgModule({
declarations:[
//引入TailNumberLengthPipe
TailNumberLengthPipe
],
imports:[
CommonModule
],
exports:[
TailNumberLengthPipe
]
}) export class TailNumberPipeModule{};
appComponent.module.ts
@NgModule({
bootstrap: [ AppComponent ],
imports: [
// import custom modules
TailNumberPipeModule
]
})
{{person.phone | tailNumberLength:5}}//+008615527370515 > ***********70515
Angular2 - Starter - Pipes, Custom Pipes的更多相关文章
- [Angular2 Form] Create custom form component using Control Value Accessor
//switch-control component import { Component } from '@angular/core'; import { ControlValueAccessor, ...
- Angular2 - Starter - Component and Component Lifecircle Hooks
我们通过一个NgModule来启动一个ng app,NgModule通过bootstrap配置来指定应用的入口组件. @NgModule({ bootstrap: [ AppComponent ], ...
- Angular2 - Starter - Routes, Route Resolver
在基于Angualr的SPA中,路由是一个很重要的部分,它帮助我们更方便的实现页面上区域的内容的动态加载,不同tab的切换,同时及时更新浏览器地址栏的URN,使浏览器回退和前进能导航到历史访问的页面. ...
- Haskell语言学习笔记(83)Pipes
安装 pipes $ cabal install pipes Installed pipes-4.3.9 Prelude> import Pipes Prelude Pipes> impo ...
- python标准库介绍——35 pipes 模块详解
==pipes 模块== (只用于 Unix) ``pipes`` 模块提供了 "转换管道 (conversion pipelines)" 的支持. 你可以创建包含许多外部工具调用 ...
- 【计算几何】【二分图判定】Gym - 101485C - Cleaning Pipes
题意:有n个水井,每个水井发出一些管线(都是线段),然后每条管线上最多只有一个水井.所有从不同的水井发出的管线的相交点都是清洁点(不存在清洁点是大于两条管线点的交点).你需要在某些管线上放出一些机器人 ...
- ASP.NET MVC和Web API中的Angular2 - 第2部分
下载源码 内容 第1部分:Visual Studio 2017中的Angular2设置,基本CRUD应用程序,第三方模态弹出控件 第2部分:使用Angular2管道进行过滤/搜索,全局错误处理,调试客 ...
- Angular2 Pipe
AngularJs 1.x 中使用filters来帮助我们转换templates中的输出,但在Angular2中使用的是pipes,以下展示Angular 1.x and Angular 2中filt ...
- 网络-05-端口号-F5-负载均衡设-linux端口详解大全--TCP注册端口号大全备
[root@test1:Standby] config # [root@test1:Standby] config # [root@test1:Standby] config # [root@test ...
随机推荐
- Codeforces 573B Bear and Blocks
http://codeforces.com/problemset/problem/573/B 题目大意: 给出n个连续塔,每个塔有高度hi,每次取走最外层的块,问需要多少次操作能够拿光所有的块. 思 ...
- MCS-51单片机实用子程序库
目前已有若干版本的子程序库公开发表,它们各有特色.本程序库中的开平方算法为快速逼近算法,它能达到牛顿迭代法同样的精度,而速度加快二十倍左右,超过双字节定点除法的速度. 本子程序库对<单片机应用程 ...
- Qt Lite
http://blog.qt.io/blog/2016/08/18/introducing-the-qt-lite-project-qt-for-any-platform-any-thing-any- ...
- expect 批量监控主机
[oracle@OAPRIMARY shell]$ cat expect.sh while read line do user=`echo $line | awk '{print $1}'` ip=` ...
- bzoj1681[Usaco2005 Mar]Checking an Alibi 不在场的证明
Description A crime has been comitted: a load of grain has been taken from the barn by one of FJ's c ...
- socket pro
/etc/exports/tmp目录共享为任何人可以共享并可以进行读写操作 /tmp *(rw,no_root_squash) /home/test 192.168.1.*(rw) *(ro) /et ...
- <php>Ajax基本格式
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo ...
- MyBatis配置解析
MyBatis配置文件解析(概要) 1.configuration:根元素 1.1 properties:定义配置外在化 1.2 settings:一些全局性的配置 1.3 typeAliases:为 ...
- The secret of ROWID
表里每个数据行都有一个行头部,在这里存放了该行数据所包含的列的数量,以及锁定标记等.当某个事务更新某条记录时,会在该数据行的头部记录所用到的ITL槽号以及锁定标记.接下来则是列长度以及列的值.Orac ...
- Android中的菜单
本文参考自官方文档:https://developer.android.com/guide/topics/ui/menus.html Android为了维护app之间一个统一的操作习惯,提供了Menu ...