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);

}

}

Angular2 管道的更多相关文章

  1. ASP.NET MVC和Web API中的Angular2 - 第2部分

    下载源码 内容 第1部分:Visual Studio 2017中的Angular2设置,基本CRUD应用程序,第三方模态弹出控件 第2部分:使用Angular2管道进行过滤/搜索,全局错误处理,调试客 ...

  2. ASP.NET MVC和Web API中的Angular2 - 第1部分

    下载源码 - 903.5 KB 内容 第1部分:Visual Studio 2017中的Angular2设置,基本CRUD应用程序,第三方模态弹出控件 第2部分:使用Angular2管道进行过滤/搜索 ...

  3. Angular2之管道学习笔记

    管道.可以把一个输出流与另一个输入流连接起来.类似 linux.gulp都有应用. 在Angular2中使用管道非常方便.Angular2中本身提供了一些内置管道.当然也可以自定义管道. 文档链接:h ...

  4. angular2的管道初体验

    ng管道是应用里面比较重要的一个技术,他涉及很多功能 包括排序过滤 废话不说 直接上代码 新建个文件夹吧这个samplepipe.ts放进去 然后 你要做什么 在里面写管道代码 然后在app.modu ...

  5. [转]Angular2 使用管道Pipe以及自定义管道格式数据

    本文转自:https://www.pocketdigi.com/20170209/1563.html 管道(Pipe)可以根据开发者的意愿将数据格式化,还可以多个管道串联. 纯管道(Pure Pipe ...

  6. angular2+ 自定义pipe管道实例--定义全局管道及使用

    首先到项目目录下ng g pipe pipe/myslice 就会在app目录下生成一个pipe文件夹文件夹下有myslice.pipe.ts文件,如果没有也可以自己手动新建 然后需要再app.mod ...

  7. 使用Angular2+的内置管道格式化数据

    在简书看到一篇关于Angualr运用内置管道格式化数据的总结,感觉挺实用的,转载一下以供参考: [转载]https://www.jianshu.com/p/a8bd5a1d2c53 PS:管道是在HT ...

  8. Angular2学习笔记——NgModule

    在Angular2中一个Module指的是使用@NgModule修饰的class.@NgModule利用一个元数据对象来告诉Angular如何去编译和运行代码.一个模块内部可以包含组件.指令.管道,并 ...

  9. 浅谈angular2+ionic2

    浅谈angular2+ionic2   前言: 不要用angular的语法去写angular2,有人说二者就像Java和JavaScript的区别.   1. 项目所用:angular2+ionic2 ...

随机推荐

  1. caffe的python接口学习(4):mnist实例---手写数字识别

    深度学习的第一个实例一般都是mnist,只要这个例子完全弄懂了,其它的就是举一反三的事了.由于篇幅原因,本文不具体介绍配置文件里面每个参数的具体函义,如果想弄明白的,请参看我以前的博文: 数据层及参数 ...

  2. 福利到~分享一个基于jquery的智能提示控件intellSeach.js

    一.需求 我们经常会遇到[站内搜索]的需求,为了提高用户体验,我们希望能做到像百度那样的即时智能提示.例如:某公司人事管理系统,想搜索李XX,只要输入“李”,系统自然会提示一些姓李的员工,这样方便用户 ...

  3. apt-get 相關設定

    /etc/apt/apt.conf.d/01proxy 若加了以下這行,則 apt-get 都會透過下方網址get Acquire::http::Proxy "http://aptcache ...

  4. BeautifulSoup 的用法

    转自:http://cuiqingcai.com/1319.html Beautiful Soup支持Python标准库中的HTML解析器,还支持一些第三方的解析器,如果我们不安装它,则 Python ...

  5. 【CF 710F】String Set Queries

    在校内OJ上A了,没有加强制在线的东西..不放链接了. 这道题题意是维护一个字符串集合,支持三种操作: 1.加字符串 2.删字符串 3.查询集合中的所有字符串在给出的模板串中出现的次数 操作数\(m ...

  6. bzoj4199:NOI2015D2T2品酒大会(SAM版)

    SAM感觉写起来比SA更直观(?) #include <iostream> #include <cstdio> #include <cstring> #includ ...

  7. 【Codeforces717G】Underfail Hash + 最大费用最大流

    G. Underfail time limit per test:1 second memory limit per test:256 megabytes input:standard input o ...

  8. web前端各大技术都能实现什么功能

    web前端各大技术都能实现什么功能 以下是孜然为你总结的web前端开发你必须要一项一项掌握的技术:Html.css.ajax.jquery.extjs.JavaScript,今天为你详细解读他们各自都 ...

  9. fscanf()函数基本用法

    FILE *fp; while(!feof(fp)) { fscanf(fp,"%s%d%lf",a,&b,&c);//这里%s对应的a不需要加上取地址符号& ...

  10. php无刷新上传图片和文件

    核心思想:通过Html的iframe标签属性操作顶级窗口,再用php动态无刷新上传图片文件. 示例如下: demo |------uploads #存放上传的文件 |------index.php | ...