Angular2 管道
1. 说明
管道用来转换模板显示的内容,应用程序中经常出现获取数据,转换数据,显示数据的逻辑。管道就是用来在转换数据阶段起作用的。主要存在两种类型的管道,pure pipe和impure pipe
2. Pure Pipe
Pure Pipe,stateless,关注于纯粹对象的变更,检测到输入值发生了 纯变更 时才会执行 纯管道 。 纯变更 是指对原始类型值 (String
、Number
、 Boolean
、 Symbol
) 的更改, 或者对对象引用 (Date
、 Array
、 Function
、 Object
) 的更改。针对复杂对象内部元素的变更不会影响到纯粹管道的执行。常见的内置管道
名称 |
用法 |
说明 |
CurrencyPipe |
expression | currency[:currencyCode[:symbolDisplay[:digitInfo]]] |
将数据转化为指定格式的金额格式输出 |
DatePipe |
expression | date[:format] |
将时间数据转换为指定格式的字符串 |
DecimalPipe |
expression | number[:digitInfo] |
将数据转化为指定格式的数据格式输出 |
LowerCasePipe |
expression | lowercase |
将数据转化为小写输出 |
UpperCasePipe |
expression | uppercase |
将数据转化为大写输出 |
JsonPipe |
expression | json |
将数据转化为json格式输出 |
SlicePipe |
expression | slice:start[:end] |
获取指定位置从start到end的数据 |
3. Impure Pipe
Impure Pipe,stateful,Angular 会在每个组件的变更检测周期中执行 非纯管道 。 非纯管道可能会被调用很多次,和每个按键或每次鼠标移动一样频繁。常见的内置非纯管道有
名称 |
用法 |
说明 |
AsyncPipe |
object | async |
接受一个 Promise 或 Observable 作为输入,并且自动订阅这个输入,最终返回它们给出的值 |
4. 如何使用
管道把数据作为输入,然后转换它,给出期望的输出。管道使用包括三个方面:
(1). 表达式语法的写法
(2). 如何参数设置
(3). 多个管道如何同时使用
从下面的例子可以很方便的看出来以上三个方面如何编写,
import { Component } from '@angular/core'; @Component({ moduleId: 'app', selector: 'app', template: ` <h5>your birthday is {{birthday | date:'MM/dd/yy' | uppercase}}</h5> `, }) export class AppComponent { birthday: Date = new Date(2012, 10, 10); } |
表达式的写法:在插值表达式中数据的右侧通过 管道操作符 ( | ) 及 右侧的管道函数 来表示
如何设置参数:在管道函数的后面添加一个冒号 ( : ) 再跟一个参数值,来为管道添加参数
多个管道同时使用:在插值表达式数据后面可以同时采用多个管道操作符 ( | ) 及 右侧的管道函数来表示多个管道,执行顺位为从左到右依次执行。
5. 自定义管道
我们来编写一个自定义管道,管道的含义是截取指定长度的字符串。
5.1 模块
首先我们引入对应的模块及函数Pipe
import { Pipe, PipeTransform } from '@angular/core'; |
5.2 注解
从@angular/core中导入Pipe及PipeTransform函数后,可以使用@ Pipe ()来标示组件类为一个Pipe,@标示注解的一种标识,用来普通类附加对应的元数据信息。
5.3 元数据
@Pipe将元数据的信息附加到类上,我们来了解一下常用的元数据信息都有哪些:
@Directive({ name: 'sub', pure: false }) |
name:管道的名称,表示在使用管道所采用的名称,例如 date等,
pure:布尔值,纯管道或者非纯管道
5.4 管道类
管道类包含实现数据转化的主要逻辑,管道类必须实现PipeTransform的transform的方法,在数据转化过程中会自动调用这个方法,并将结果返回。我们实现截取的管道类代码如下
export class SubPipe implements PipeTransform { transform(value: string, length: number): string { return value.substring(0, length); } } |
最后实现的代码如下:
import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'sub', pure: false }) export class SubPipe implements PipeTransform { transform(value: string, length: number): string { return value.substring(0, length); } } |
转载于:https://www.cnblogs.com/SLchuck/p/5771316.html
Angular2 管道相关推荐
- php+管道+pipe管道,angular2+管道pipe
一.什么是Pipe? 就是管道,简单来说,管道的作用就是传输.并且不同的管道具有不同的作用.(其实就是处理数据) 二.pipe用法 {{ 输入数据 | 管道 : 管道参数}} (其中'|'是管道操作 ...
- angular2+ 自定义pipe管道实例--定义全局管道及使用
首先到项目目录下ng g pipe pipe/myslice 就会在app目录下生成一个pipe文件夹文件夹下有myslice.pipe.ts文件,如果没有也可以自己手动新建 然后需要再app.mod ...
- [转]Angular2 使用管道Pipe以及自定义管道格式数据
本文转自:https://www.pocketdigi.com/20170209/1563.html 管道(Pipe)可以根据开发者的意愿将数据格式化,还可以多个管道串联. 纯管道(Pure Pipe ...
- Angular2 中用管道技术吧汉字转换为拼音
用 angular2 开发的项目中需要动态的把汉字转换为拼音,直接把自己以前写的一篇文章<coffeescript 汉字转拼音代码>中的内容拿过来用 TypeScript 重新写了一下,修 ...
- (三) Angular2项目框架搭建心得
前言: 在哪看到过angular程序员被React程序员鄙视,略显尴尬,确实Angular挺值得被调侃的,在1.*版本存在的几个性能问题,性能优化的"潜规则"贼多,以及从1.*到2 ...
- Angular2学习笔记——NgModule
在Angular2中一个Module指的是使用@NgModule修饰的class.@NgModule利用一个元数据对象来告诉Angular如何去编译和运行代码.一个模块内部可以包含组件.指令.管道,并 ...
- angular2.0学习日记1
使用NG2之前需要安装node以及Npm环境,并到node下下载ng2所需要得文件,具体配置请到https://angular.cn/docs/ts/latest/quickstart.html按照提 ...
- Angular2 从搭建环境到开发
Angular2 的发布带来了一阵热议,很久之前就在筹备了,当时的官方答复就是彻底推翻重写,问世之后大家的呼声就是学习成本太高,虽然去掉了 1.x 里的一部分概念,但是加进了 typescript,虽 ...
- 关于angular2更新时机的一些发现
关于angular2更新时机的一些发现 引入: angular2官网关于管道(Pipe)的介绍中说明,angular2的管道分为pure和impure. 非纯管道Impure pipes Angula ...
最新文章
- Web充斥着存在漏洞的过期JavaScript库
- 【面试现场】如何在10亿数中找出前1000大的数
- 使用Logstash filter grok过滤日志文件
- pytorch Dataset, DataLoader产生自定义的训练数据
- MySQL 高级 - 索引 - 索引设计原则
- Intellij IDEA 自动生成 serialVersionUID
- android strm,Android 关于so文件的随记
- oracle查看登录时间黑屏,oracle 11g默认用户名、密码解锁 以及安装后重启黑屏问题.doc...
- registry:NoSuchMethodError zookeeper.server.quorum.flexible.QuorumMaj
- 带有控制器,方法,标题,参数,@ RequestParam,@ PathVariable的Spring MVC @RequestMapping注释示例
- 5.2 Array类型
- go语言ATM小案例
- TikTok(国际版抖音)时间线
- php新浪微博登录接口,php新浪微博登录接口用法实例
- php怎么替换斜杠,PHP 反斜杠如何替换掉?
- Java漫漫求学之路 SSM《金商家医院管理系统》项目研发文献
- 《可以量化的经济学》凯恩斯主义与…
- C 语言画一颗圣诞树
- 以影像技术为“桨“,荣耀如何讲好高端“新故事”?
- python第四次作业——陈灵院