angular 内置管道和自定义管道

angular 管道（相当于1.x中的filter过滤器）：主要用于格式化源数据，而不改变源数据

angular内置过滤器：
Angular 2 内建管道及分类

String -> String

UpperCasePipe 大写转换
LowerCasePipe 小写转换
TitleCasePipe 将文本转换为标题大小写，将每个单词的第一个字母大写，并将单词的其余部分转换为小写。单词由任何空格字符分隔，例如空格，制表符或换行符

Number -> String

DecimalPipe 将数字转换为字符串，根据确定组大小和分隔符，小数点字符以及其他特定于语言环境的配置的区域设置规则进行格式化。
PercentPipe 百分比管道，根据区域设置规则将数字格式化为百分比。
CurrencyPipe 货币管道

Object -> String

JsonPipe 将JavaScript 对象转化为JSON字符串
DatePipe 返回指定格式的日期

Tools

SlicePipe 截取
           AsyncPipe
           I18nPluralPipe
           I18nSelectPipe

demo:

大写转换：{{ 'Angular' | uppercase }}
 小写转换：{{ 'Angular' | lowercase }}
 标题转换：{{'one,two,three' | titlecase}} 

数字转字符串：
 {{ value_expression | number [ : digitsInfo [ : locale ] ] }}
 十进制表示选项，由以下格式的字符串指定：
 digitsInfo={minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}。

minIntegerDigits：小数点前的最小整数位数。默认是1。
 minFractionDigits：小数点后的最小位数。默认是0。
 maxFractionDigits：小数点后的最大位数。默认是3。
 
 e (4.5-5): {{2.718281828459045 | number:'4.5-5'}}
 百分比： {{ 00.54565 | percent }}
 货币管道：
 {{6589.23 | currency:"USD"}}
 {{6589.23 | currency:"USD":true}} //true 显示货币标示. false不显示货币标示
json:
 let jsonVal = {
 name: 'zhangsan',
 address: {
 a: '12',
 b: '23'
 }
 }
 {{jsonVal|json}}
日期：
 {{ ‘2020-10-10 13:00’ | date: 'shortTime' }} 
 {{ ‘2020-10-10 13:00’ | date: 'yy/mm/dd hh:mm:ss' }} 

截取字符串：
 let months = ["Jan", "Feb", "Mar", "April", "May", "Jun","July", "Aug", "Sept", "Oct", "Nov", "Dec"']
 {{months | slice:2:5}}// here 2 and 5 refers to the start and the end index

管道链：我们可以将多个管道连接在一起，组成管道链对数据进行处理。
{{ 'semlinker' | slice:0:3 | uppercase }}

自定义管道：
在Angular中可以自定义带参数的管道；只要遵循下面三条规则：
1.使用 @Pipe 装饰器声明管道的名称,即定义 Pipe 的 metadata 信息，如 Pipe 的名称 ----即 name 属性
2.实现 PipeTransform 接口中定义的 transform 方法
3.如果是全局使用，则 include your pipe in the declarations array of the AppModule；如果想要局部使用，则 provide it in the providers array of your NgModule.

demo:

        //定义import { Pipe, PipeTransform } from '@angular/core';@Pipe({ name: 'welcome' })export class WelcomePipe implements PipeTransform {transform(value: string): string {if(!value) return value;if(typeof value !== 'string') {throw new Error('Invalid pipe argument for WelcomePipe');}return "Welcome to " + value;}} //使用<div><p ngNonBindable>{{ 'semlinker' | welcome }}</p><p>{{ 'semlinker' | welcome }}</p> <!-- Output: Welcome to semlinker --></div>//当 WelcomePipe 的输入参数，即 value 值为非字符串时，如使用 123，则控制台将会抛出异常

纯管道和非传管道：

  同时，Angular中，pipe分为 pure pipe (纯管道) 和 impure pipe (非纯管道)。
   纯管道和非纯管道是相对于管道所传的参数（如上例的 filterKey）而言的。
   如果管道是纯管道，则管道的触发只会针对基本类型的参数的变化或者引用类型引用的变化（ a primitive input value (String, Number, Boolean, Symbol) or a changed object reference (Date, Array, Function, Object)）；
   然而，对于非纯管道，不管是基本类型参数的改变还是引用类型内部数据变化（而非引用变化）都可以触发管道。
   @Pipe({
   name: 'myFilter',
   pure: false // false：非纯管道 true:纯管道
   })

demo：

html:

<div class="test"><table class="a-table"><thead class="a-thead"><tr><th>Name</th><th>Sex</th></tr></thead><tbody class="a-tbody"><ng-container *ngFor="let student of students|myFilter: filterObj"><tr><td> {{ student.name }}</td><td> {{ student.sex }}</td></tr></ng-container></tbody></table><div class="a-p-20"><label class="a-form-label">带参的纯管道：过滤male/female</label><!-- <input class="a-text-input" #filterKey /> --></div><div class="a-p-20"><label class="a-form-label">过滤 name</label><input class="a-text-input" #name /></div><div class="a-p-20"><label class="a-form-label">过滤 sex</label><input class="a-text-input" #sex /></div><button class="a-btn a-btn-secondary a-btn-lg" (click)="constructFilterObj(name.value, sex.value)">Go Filter</button>
</div>

angular ts:

private students: any[]; // 需要被管道处理的数据private filterObj = Object.create({});   // 对象： 创建一个空对象并作为传给管道的参数,this.students = [{name:'Tom',sex: 'male'},{name:'Jerry',sex: 'male'},{name:'Alice',sex: 'female'},{name:'Henry',sex: 'male'}];});............constructFilterObj(name: string, sex: string) {  // 该方法用于构造传给管道的参数 filterObjthis.filterObj['name'] = name;this.filterObj['sex'] = sex;}

纯管道:

import { Pipe, PipeTransform } from '@angular/core';@Pipe({name: 'myFilter',pure: true // default
})
export class MyFilterPipe implements PipeTransform {transform(value: any, filterKey: any) {if (!filterKey['name']) {return value;}return value.filter(item => item.name === filterKey.name && item.sex === filterKey.sex );}
}

结果:

说明：
   上述demo中，filterObj 初始化是一个空对象 filterObj = Object.create({});
   当点击button按钮的时候，传入name：Tom和Sex：male时，触发constructFilterObj方法改变了this.filterObj的值，但是没有改变的this.filterObj对象的引用。
   所以，对于纯管道来说，它是检测不到这个输入的变化的，因此数据不会被过滤。当将该管道改为非纯管道后，过滤就起作用了。

非纯管道:

import { Pipe, PipeTransform } from '@angular/core';@Pipe({name: 'myFilter',pure: false //  非纯管道
})
export class MyFilterPipe implements PipeTransform {transform(value: any, filterKey: any) {if (!filterKey['name']) {return value;}return value.filter(item => item.name === filterKey.name && item.sex === filterKey.sex );}
}

结果:

可以看到， Tom被过滤出来了

每天一点点

angular 内置管道和自定义管道相关推荐

AngularJS-demo - 常用命令、内置服务、自定义服务、继承
AngularJS-demo - 常用命令.内置服务.自定义服务.继承常用命令: ng-app.ng-controller.ng-init.ng-repeat.ng-click 内置服务: $sco ...
awk 内置变量与自定义变量
点击上方"生信科技爱好者",马上关注真爱,请置顶或星标作者:ghostwu 原文:https://www.cnblogs.com/ghostwu/p/9085653.html A ...
Vue011_ 内置指令与自定义指令
内置指令与自定义指令常用内置指令 1) v:text : 更新元素的 textContent 2) v-html : 更新元素的 innerHTML 3) v-if : 如果为 true, 当前标签 ...
文件自定义变量_awk 内置变量与自定义变量
点击上方"生信科技爱好者",马上关注真爱,请置顶或星标作者:ghostwu 原文:https://www.cnblogs.com/ghostwu/p/9085653.html A ...
java 多重注解_Java注解-元数据、注解分类、内置注解和自定义注解
大家好,我是乐字节的小乐,上次说过了Java多态的6大特性|乐字节,接下来我们来看看Java编程里的注解. Java注解有以下几个知识点:元数据注解的分类内置注解自定义注解注解处理器 Serv ...
2字节取值范围_Java注解-元数据、注解分类、内置注解和自定义注解|乐字节
大家好,我是乐字节的小乐,上次说过了Java多态的6大特性|乐字节,接下来我们来看看Java编程里的注解. Java注解有以下几个知识点: 元数据注解的分类内置注解自定义注解注解处理器 Ser ...
form-create教程:给内置组件和自定义组件添加事件
本文将介绍form-create如何给内置组件和自定义组件添加事件 form-create 是一个可以通过 JSON 生成具有动态渲染.数据收集.验证和提交功能的表单生成器.并且支持生成任何 Vue ...
大数据入门教程系列之Hive内置函数及自定义函数
本篇文章主要介绍Hive内置函数以及自定义UDF函数和UDFT函数,自定义UDF函数通过一个国际转换中文的例子说明. 操作步骤: ①.准备数据和环境 ②.演示Hive内置函数 ③.自定义UDF函数编写 ...
内置函数、自定义函数
编程语言的函数都可以分为两类:内置函数和自定义函数. 内置函数分为数字相关的内置函数 # abs(x) 求绝对值print(abs(-10)) #10 """ divm ...

angular 内置管道和自定义管道

angular 内置管道和自定义管道相关推荐

最新文章

热门文章