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 ...
随机推荐
- EE就业最好的方向是转CS,其次是VLSI/ASIC DESIGN & VERIFICATION
Warald在2012年写过一篇文章<EE现在最好就业的方向是VLSI/ASIC DESIGN VERIFICATION>,三年过去了,很多学电子工程的同学想知道现在形势如何. 首先,按照 ...
- qt-vs-addin:Qt4和Qt5之VS插件如何共存与使用
原则上,两者是不可以同时存在的,但是如果都安装了,该如何分别使用他们呢? Qt4 Visual Studio Add-in:官网可以下载安装程序,qt-vs-addin-1.1.11-opensour ...
- ImageButton自定义按钮的按下效果的高效实现方法(非一般)
通常情况下,我们可以采用如下方式实现: <?xml version="1.0" encoding="UTF-8"?> <selector xm ...
- MyBatis里json型字段到Java类的映射
一.简介 我们在用MyBatis里,很多时间有这样一个需求:bean里有个属性是非基本数据类型,在DB存储时我们想存的是json格式的字符串,从DB拿出来时想直接映射成目标类型,也即json格式的字符 ...
- 【转】NPAPI 插件无法在 Chrome 42 版及更高版本上正常运行
原文网址:https://support.google.com/chrome/answer/6213033 NPAPI 插件无法在 Chrome 42 版及更高版本上正常运行 您可以利用插件在浏览器中 ...
- Gwt ListBox选中自动触发事件
以前用TreeView显示,需求更改 需要做一个ListBox控件显示数据,和HTML中的<Select>标签一样 编辑时候自动触发选中的数据子类: 1.只要自动触发了rootListBo ...
- c语言typedef运用与函数指针
#include <stdio.h> #include <stdlib.h> #define PINT int * typedef short* PSHORT; //typed ...
- (转)iOS7界面设计规范(11) - UI基础 - 图标与图形
不知别人如何,我自己来讲,平时很习惯很有动力去做的一些事,譬如博客吧,一旦生活中出现一些让自己很难受的状况,就很容易受到影响:像是,你平时所习惯的生活状态都是基于某种东西的,一旦这种东西崩塌,会影响到 ...
- oracle插入特殊字符'&'问题
oracle转义字符开关:set define off / show define
- [Redux] Redux: Extracting Container Components -- AddTodo
Code to be refactored: const AddTodo = ({ onAddClick }) => { let input; return ( <div> < ...