[Angular 2] Understanding Pure & Impure pipe
First, how to use a build in pipe:
<div class="pipe-example">
<label>Uppercase Pipe: {{ message | uppercase }}</label>
</div> <div class="pipe-example">
<label>Lowercase Pipe: {{ message | lowercase }}</label>
</div> <div class="pipe-example">
<label>Slice Pipe: {{ message | slice:0:5 }}</label>
</div> <div class="pipe-example">
<label>Date Pipe: {{ date | date:'yyyy-MMM-dd' }}</label>
</div> <div class="pipe-example">
<label>Number Formatting: {{ pi | number:'5.1-2' }}</label>
</div> <div class="pipe-example">
<label>Percent Pipe: {{ percentage | percent:'2.1-2' }}</label>
</div> <div class="pipe-example">
<label>Currency Pipe: {{ amount | currency:'USD':true:'2.1-2' }}</label>
</div>
Then how to create a custom pipe:
import { Pipe, PipeTransform } from '@angular/core'; @Pipe({
name: 'sort'
})
export class SortPipe implements PipeTransform {
transform(value: any[], args): any[] { let sorted = [
...value
].sort(); if(args.length > 0 && args === "DESC"){
sorted = sorted.reverse();
} return sorted;
}
}
Notice here, we use:
let sorted = [
...value
].sort();
The reason doing this is because sort() is mutate opreation, once you apply sort(), it will mutate the original data, which is not good. So here we create a copy of data and apply sort() fucntion to enhance immutatbility.
Pure and Impure:
See example at: https://angular.io/resources/live-examples/pipes/ts/plnkr.html
Pure pipe it means:
It won't go thought Angular Change Detection if the primitive type reference doesn't change.
if (this.mutate) {
// Pure pipe won't update display because heroes array reference is unchanged
// Impure pipe will display
this.heroes.push(hero);
} else {
// Pipe updates display because heroes array is a new object
this.heroes = this.heroes.concat(hero);
}
So if 'this.mutate' is ture, then we mutate this.heros array, so primitive type (array) reference is changed. So this will trigger change detection. So that, everytime you add a hero into the this.hero, piped result will update.
If this.mutate is false, then reference won't change, therefore, if you add new hero, even set 'can fly' tag to ture, it won't update the piped result.
Impure pipe:
Angular executes an impure pipe during every component change detection cycle. An impure pipe will be called a lot, as often as every keystroke or mouse-move.
To set pure or impure you just need to add a pure flag:
@Pipe({
name: 'sort',
pure: true //false
})
Default is ture.
So when build a custom pipe, you need to decide whether it should be pure or impure.
[Angular 2] Understanding Pure & Impure pipe的更多相关文章
- [Angular] Increasing Performance by using Pipe
For example you make a function to get rating; getRating(score: number): string { let rating: string ...
- [Angular] Bind async requests in your Angular template with the async pipe and the "as" keyword
Angular allows us to conveniently use the async pipe to automatically register to RxJS observables a ...
- angular和ionic4对过滤器pipe的使用
以下为自定义过滤器 import { Pipe, PipeTransform, Injectable } from '@angular/core'; import { DomSanitizer} fr ...
- [Angular 2] Understanding OpaqueToken
When using provider string tokens, there’s a chance they collide with other third-party tokens. Angu ...
- [Angular 2] Understanding @Injectable
In order to resolve a dependency, Angular’s DI uses type annotations. To make sure these types are p ...
- Angular 的性能优化
目录 序言 变更检查机制 性能优化原理 性能优化方案 小结 参考 序言 本文将谈一谈 Angular 的性能优化,并且主要介绍与运行时相关的优化.在谈如何优化之前,首先我们需要明确什么样的页面是存在性 ...
- [转]Angular2 使用管道Pipe以及自定义管道格式数据
本文转自:https://www.pocketdigi.com/20170209/1563.html 管道(Pipe)可以根据开发者的意愿将数据格式化,还可以多个管道串联. 纯管道(Pure Pipe ...
- Angular2 Pipe
AngularJs 1.x 中使用filters来帮助我们转换templates中的输出,但在Angular2中使用的是pipes,以下展示Angular 1.x and Angular 2中filt ...
- angular管道相关知识
原文地址 https://www.jianshu.com/p/22e0f95bcf24 什么是管道 每个应用开始的时候差不多都是一些简单任务:获取数据.转换它们,然后把它们显示给用户. 获取数据可能简 ...
随机推荐
- ASP.NET导出excel表方法汇总
asp.net里导出excel表方法汇总 1.由dataset生成 public void CreateExcel(DataSet ds,string typeid,string FileName) ...
- springmvc的一些优化设置
1.配置文件的优化: 无需使用 <bean class="org.springframework.web.servlet.mvc.annotation.DefaultAnnotatio ...
- 卸载 Cloudera Manager 5.1.x.和 相关软件【官网翻译】
问题导读: 1.不同的安装方式,卸载方法存在什么区别?2.不同的操作系统,卸载 Cloudera Manager Server and 数据库有什么区别? 重新安装不完整如果你来到这里,因为你的安装没 ...
- google proto buffer安装和简单示例
1.安装 下载google proto buff. 解压下载的包,并且阅读README.txt,根据里面的指引进行安装. $ ./configure $ make $ make check $ mak ...
- curl命令的基本用法
我们知道在linux环境下,可以调用curl下载网页. 但curl有些高级的应用,只需要几行命令行,可能比你写多行php.python.C++的程序要快些. 下面从问题驱动的角度来谈谈curl的用法 ...
- Windows 下整理内存工具推荐——cleanmem
---恢复内容开始--- cleanmem 是个不错的内存整理工具,www.xdown.com 下载有便携版提供下载. 软件有pro版和free版,一般情况下,free版够用了,没必要用pro版. p ...
- HDU 1312 http://acm.hdu.edu.cn/showproblem.php?pid=1312
#include<stdio.h> #include<string.h> #include<math.h> #include<stdlib.h> #de ...
- HDU 2874 Connections between cities (LCA)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2874 题意是给你n个点,m条边(无向),q个询问.接下来m行,每行两个点一个边权,而且这个图不能有环路 ...
- Object类、instanceof
一.Object 1.所有类都默认继承至Object 2.两个常用的方法 2.1.toString:返回类的字符串描述,一般子类会重写用来打印属性 2.2.equals:默认比较两个对象的引用是否相同 ...
- Listview上下滚动崩溃
利用CursorAdapter在ListView中显示Cursor中不同同类型的item,加载均正常,滚动时报如下错误: 11-28 15:18:16.703: E/InputEventReceive ...