angular管道相关知识

什么是管道

  每个应用开始的时候差不多都是一些简单任务:获取数据、转换它们,然后把它们显示给用户。
  获取数据可能简单到创建一个局部变量就行,也可能复杂到从WebSocket中获取数据流。一旦取到数据,我们可以把它们原始值的toString结果直接推入视图中。 但这种做法很少能具备良好的用户体验。 比如,几乎每个人都更喜欢简单的日期格式,例如1988-04-15,而不是服务端传过来的原始字符串格式 —— Fri Apr 15 1988 00:00:00 GMT-0700 (Pacific Daylight Time)。显然,有些值最好显示成用户友好的格式。我们很快就会发现,在很多不同的应用中,都在重复做出某些相同的变换。 我们几乎会把它们看做某种CSS样式,事实上,我们也确实更喜欢在HTML模板中应用它们 —— 就像CSS样式一样。通过引入Angular管道,我们可以把这种简单的“显示-值”转换器声明在HTML中。
  管道把数据作为输入,然后转换它,给出期望的输出。
  管道(Pipe)可以根据开发者的意愿将数据格式化。
  下图显示的就是内置DATE管道,输入值birthday通过管道操作符( | )流到管道date中,根据管道参数来对流入的数据参数化。

  

如何使用管道

//管道使用语法
{{expression | pipe : arg}}
//如果是链式串联:
{{expression | pipe1 : arg | pipe2 | pipe3 }}

管道参数化

  管道可能接受任何数量的可选参数来对它的输出进行微调。 我们可以在管道名后面添加一个冒号( : )再跟一个参数值,来为管道添加参数(比如currency:‘EUR‘)。 如果我们的管道可以接受多个参数,那么就用冒号来分隔这些参数值(比如slice:1:5)。
  可以理解对管道进行参数化的意思是:传入某些参数,对转换结果进行限制性的格式化转换。
  即:
  {{ birthday | date }}若不传参数,则为默认值,即输出:Dec 26, 2017
  {{ birthday | date:"MM/dd/yy" }}传入了参数,对转换结果的格式进行了限制,输出:12/26/2017
  当然这些参数化的参数是管道中已经定义好的了,而不是可以随便传入的,管道会根据传入的参数匹配管道中定义好的参数,匹配之后再根据定义好的规则进行不同的格式化转换。

链式管道

//我们可以把管道链在一起,以组合出一些潜在的有用功能。
{{myDataDate | date:"fullDate"}}:Tuesday, December 26, 2017
{{myDataDate | date:"fullDate" | uppercase}}:TUESDAY, DECEMBER 26, 2017

常用的内置管道

管道                 类型                    功能
DatePipe            纯管道                 日期格式化
JsonPipe            非纯管道               使用JSON.stringify()将对象转成json字符串
UpperCasePipe       纯管道                 将文本中的字母全部转在大写
LowerCasePipe       纯管道                 将文本中的字母全部转成小写
TitleCasePipe                             将文本转换成标题格式
DecimalPipe         纯管道                 数值格式化
CurrencyPipe        纯管道                 货币格式化
PercentPipe         纯管道                 百分比格式化
SlicePipe           非纯管道               数组或字符串取切割
I18nPluralPipe                            根据expression的值匹配mapping中的值,并将匹配之后的值展示出来
I18nSelectPipe                            根据expression匹配mapping中的值,并且返回匹配之后的值

angular管道的变化监测

  Angular通过变更检测过程来查找绑定值的更改,并在每一次JavaScript事件之后运行:每次按键、鼠标移动、定时器以及服务器的响应。 这可能会让变更检测显得很昂贵,但是Angular会尽可能降低变更检测的成本。
  每一次的变更检测如果都引起管道的运行,那么是否就会造成程序任务的繁重,换句话说,如果每一次的鼠标移动,每一次的键盘按下都调用了这个管道实践,就会使得整个程序的繁忙。
  更多情况下,我们不知道什么时候数据变化了,尤其是在那些有很多种途径改动数据的程序中 —— 可能在程序中很远的地方。 组件就是一个通常无法知道那些改动的例子。此外,它会导致削足适履 —— 扭曲我们的组件设计来适应管道。 我们要尽可能保持组件类独立于HTML。组件不应该关心管道的存在。
  Angular管道有两种变化监测机制,一种是纯管道(默认),另一种即非纯管道。
  有两类管道:纯的与非纯的。 默认情况下,管道都是纯的。我们以前见到的每个管道都是纯的。 通过把它的pure标志设置为false,我们可以制作一个非纯管道。

纯变更和非纯变更实例对比

  下面的管道过滤只显示”李”姓的联系人,如果用户输入一个”李”姓联系人,然后回车将该联系人添加至contacts数组中。然后我们会觉得联系人列表应该会实时显示新的联系人,然而并没有。
  这是因为Angular优化了管道的监测机制,它会忽略对象内值的变化,只会监测指向对象的指针是否发生改变。
  这种管道称为纯管道,虽然纯管道优化了性能,但有时无法满足需求,就像下面的例子那样。这时我们就需要另外一种变化监测机制,也就是非纯管道。我们可以通过将pure设置为false,这样每当我们输入一个李姓名字的时候就可以在成功添加显示这个李姓名字。

select-contactPipe.pipe.ts

/*
 select-contactPipe.pipe.ts
 步骤 :
 1、导入Pipe,PipeTransform
 2、通过注解定义名字,定义是纯管道还是非纯管道,默认是纯管道
 3、定义管道并继承PipeTransform
 4、实现继承的方法transform
 */
import { Pipe, PipeTransform } from ‘@angular/core‘;
/*
 * from:http://blog.csdn.net/qq451354/article/details/58588252?locationNum=15&fps=1
 * Usage:
 *   value | selectContactPipe:exponent
 * Example:
 *   contacts = [{name: ‘张三‘}, {name: ‘李四‘}];
 *   {{ contacts | selectContactPipe: ‘李‘ }}
 *   output:李四
 */
@Pipe({
  name: ‘selectContactPipe‘,
  //pure: false
})
export class SelectContanctPipe implements PipeTransform {
  transform(allContacts: Array<string>, prefix: string) {
    return allContacts.filter(contact => contact.name.match(prefix));
  }
}

test.html

<input type="text" #box (keyup.enter)="addContact(box.value); box.value=‘‘" placeholder="输入联系人后回车添加" />
<div *ngFor="let contact of (contacts | selectContactPipe: ‘李‘)">
  {{contact.name}}
</div>

test.component.ts

contacts = [{name: ‘张三‘}, {name: ‘李四‘}];
addContact(name: string) {
    this.contacts.push({name});
}

纯管道(Pure Pipe)

  使用纯管道时,只有监测到输入值发生纯变更才会调用纯管道的transform方法来转换数据。
  纯变更是指对基本数据类型输入值的变更,或对对象的引用放生改变。

非纯管道(Impure Pipe)

  使用非纯管道,Angular组件在每个变化监测周期都会调用非纯管道。每个变化周期指的是每次的点击,回车等事件发生就会调动检测机制从而监测数据是否发生变化,并且这样的检测不仅仅可以检测出纯变更,同样能监测出非纯变更,即对象的地址不变,但内容变化了同样可以检测出来。

//设置非纯管道
@Pipe({
    name: ‘selectContact‘,
    pure: false    //设置非纯管道
})

参考网址

管道的相关知识
http://blog.csdn.net/qq451354/article/details/58588252?locationNum=15&fps=1
https://www.pocketdigi.com/20170209/1563.html
https://segmentfault.com/a/1190000008262691

原文地址:https://www.cnblogs.com/shcrk/p/9194708.html

时间: 2024-10-26 08:37:51

angular管道相关知识的相关文章

angular.extend相关知识

angular.extend 复制src对象中的属性去dst对象中. 支持多个src对象. 如果你不想改变一个对象,你可以把dst设为空对象{}: var object = angular.extend({}, object1, object2). 注意: angular.extend不支持递归复制. 使用方法: angular.extend(dst, src); 参数: Param Type Details dst Object 目标对象 src Object 被copy的对象(>=1) 返回

HTTP协议知多少-关于http1.x、http2、SPDY的相关知识

作为网站开发的基础协议,我们知道浏览器上都有输出http这四个字母,这意味着什么呢? 这就是最基础的HTTP协议. 逐浪君今天为各位大人准备了一些HTTP技术的知识,来和大家分享. 以下图为例: 这一个加载界面,至少用到了http/1.1.SPDY.Http/2(简称h2)三种浏览器技术. 先说HTTP/1.1: HTTP1.1(Hypertext Transfer Protocol Version 1.1)超文本传输协议-版本1.1它是用来在Internet上传送超文本的传送协议.它是运行在T

【干货】样品气体预处理系统相关知识汇总

武汉天禹智控科技有限公司依托多年来从事气体分析行业的经验和强大的技术实力,经过多年研制开发和应用实践,在传感技术方面,成功的研制出拥有自主知识产权的电化学分析仪系列,红外分析仪系列,紫外气体分析仪系列,激光分析仪系列,光声光谱气体分析仪系列,适用于各种工况的工业过程分析系统,同时可以根据客户需求进行气体分析仪个性定制,产品广泛应用于环保.冶金.石化.化工.能源.食品.农业.交通.水利.建筑.制药.酿造及科学研究等众多行业,并且得到用户的一直好评.现针对样品气体预处理系统相关知识汇总分享,供大家使

Linux系统的相关知识、常用命令及拓展、centos 7网卡配置

一.Linux系统的相关知识 1.Linux中根目录下所有文件夹的含义和用途 目录 功能 /bin 存放可执行文件 /dev 存放设备文件 (如:网卡.CPU) /media 存放可移除设备文件 (如:U盘.CD/DVD.VMTools) /opt 存放第三方软件的默认位置 /tmp  存放临时文件 (如:日志文件) /root root用户的家目录,主文件夹 /home 普通用户的家目录,文件夹的命名是以用户的名字来命名的 /etc 存放配置文件 /usr 存放操作系统软件资源 /var 存放

python的list相关知识

关于list的相关知识 list01 = ['alex',12,65,'xiaodong',100,'chen',5] list02 = [67,7,'jinjiao_dawang','relax1949',53] #打印list01.list02 print(list01) print(list02) #列表截取.切片 print(list01[1]) print(list01[-2]) print(list01[1:3]) #列表重复 print(list01 * 3) #列表组合 prin

三层交换机相关知识

三层交换机相关知识 这次的作死之路又要开始了.这次的对象主要是交换机:还是三层的: 这是这次实验的总体用图: 现在现根据图上的标志:将所有的主机配置好:目前没有做任何vlan:所以PC1和PC3是能够互通的: 接下来:我想先去探索下三层交换机关闭portswitch会怎么样: 第一步:先关闭了再说: 因为按照图中的设计:PC1的帧如果想要到达PC2,那么就必然要经过LSW1.但是现在我关闭了g0/0/1端口的portswitch:现在pc1并不能ping通pc2: 通过百度:三层交换机的端口不仅

php学习day7--函数的相关知识

今天我们主要学了函数的相关知识,是个比较基础的知识,但也是很重要的. 一.函数 函数就类似于一个工具,我们写好函数之后可以直接进行调用,可以很大的减少代码的从用性,提高页面性能和可读性. 1.函数的定义 在php中函数的定义方式为: function  name($形参1,$形参2.....){ 要执行的代码 return  123: } 在上方的函数定义式中,name代表函数名,小括号内是形参,是用来传递参数,花括号中的就是调用时需要执行的代码. 函数的调用方式: name(实参1,实参2,.

svn常规操作与相关知识

Svn常规操作与相关知识 一.何谓版本控制 它是一种软件工程籍以在开发的过程中,确保由不同人所编辑的同一档案都得到更新,它透过文档控制记录程序各个模块的改动,并为每次改动编上序号,并且编辑错误之后还可以回溯到以前的版本 二.可供我们选择的版本控制系统 1.VCS  (本地版本控制) 2.VSS.CVS(集中版本控制) 3.ClearCase.SVN.Perforce.TFS(集中版本控制) 4.Mercurial(水银/水星).Git(分布式版本控制) 差异: 1.Git和其他版本控制系统的主要

黑马程序员---Objective-C基础学习---类、对象、方法相关知识笔记

------Java培训.Android培训.iOS培训..Net培训.期待与您交流! ------- 类.对象.方法相关知识笔记 Objective-C相对于C语言有了面向对象的特性,但是ObjC又没有其他面向对象语言那么多语法特性,ObjC本身对面向对象进行了精简.下面是一些相关知识笔记. 类定义 成员变量 方法和属性 self关键字 类定义 在C#.Java等其他高级语言中定义一个类是相当简单点的,直接一个关键字class加一对大括号基本就完成了,但是在ObjC中类的定义相对变化比较大.现