ng2自定义管道
一、管道的作用及本质
作用:数据处理
本质:公用的方法
二、定义管道组件
//summary.pipe.ts
import { Pipe, PipeTransform } from '@angular/core'; @Pipe({
name: 'summary',
// pure: false 管道默认为纯管道,如果加了pure:false 则为非纯管道
// 纯管道只能检测纯变更(原始类型(String Number Boolean Symbol)值的更改,或者对对象引用(Date Array Function Object)的更改)
})
export class SummaryPipe implements PipeTransform {
transform(value: number[], args: any[]): any{return value.reduce((prev,next)=>{prev + next}); //数组求和
}
}
三、module组件中引入管道
//app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { SummaryPipe} from './summary.pipe'; @NgModule({
imports: [
BrowserModule,
SummaryPipe //管道引入
],
declarations: [
AppComponent
],
bootstrap: [ AppComponent ]
})
export class AppModule { }
四、组件中使用管道
// app.component.ts
import { Component } from '@angular/core'; @Component({
selector: 'my-app',
template: `
<div><span *ngFor="let i of list" >{{i}} </span></div>
<div>{{list | summary:value}}</div>
//模板中使用管道
<button (click)="addNum()">add 4</button>
`,
styleUrls:['./app.component.css']
})
export class AppComponent {
list: number[] = [1,2,3];
addNum() {
this.list.push(4);
}
}
五、页面效果
1.纯管道
点击按钮之后
2.非纯管道
点击按钮之后
从图中可以看出,使用非纯管道实现了累加,而使用纯管道不能实现累加
六、说明
模板中可以在管道后面加冒号:如:
<div>{{list | summary:value}}</div>
这里的value则为传给管道的参数(args)
ng2自定义管道的更多相关文章
- [转]Angular2 使用管道Pipe以及自定义管道格式数据
本文转自:https://www.pocketdigi.com/20170209/1563.html 管道(Pipe)可以根据开发者的意愿将数据格式化,还可以多个管道串联. 纯管道(Pure Pipe ...
- angular自定义管道
原文地址 https://www.jianshu.com/p/5140a91959ca 对自定义管道的认识 管道的定义中体现了几个关键点: 1.管道是一个带有“管道元数据(pipe metadata) ...
- Angular 自定义管道
管道的作用就是将原始值进行转化处理,转换为所需要的值: 1. 新建sex-reform.pipe.ts文件 ng g pipe sex-reform 2. 编辑sex-reform.pipe.ts文件 ...
- Ocelot自定义管道中间件
Ocelot是啥就不介绍了哈,网关大家都知道,如果大家看过源码会发现其核心就是由一个个的管道中间件组成的,当然这也是Net Core的亮点之一.一个请求到来,会按照中间件的注册顺序进行处理,今天的问题 ...
- angular8自定义管道、指令以及获取dom值
版本: 1.自定义管道: example: 定义一个*ngFor 可以获取key值的管道 keyObject.pipe.ts // key value 管道 import { Pipe, PipeTr ...
- Angular:管道和自定义管道
①管道的使用,更多管道在angular官网上有 <p>全部转为大写:{{'hahahah' | uppercase}}</p> <p>保留两位小数:{{1.4555 ...
- 【angular5项目积累总结】自定义管道 OrderBy
import { Injectable, Pipe } from '@angular/core'; @Pipe({ name: 'orderBy' }) @Injectable() export cl ...
- angular之自定义管道
1,装了angular2 的 cli之后,cmd中命令建立个管道文件 ng g p <name>; 如建一个在pipe文件中建一个add.pipe.ts文件 可以这么么写 ng g p p ...
- BizTalk动手实验(十一)自定义开发管道组件
1 课程简介 通过本课程熟悉自定义开始管道组件的流程.各组件接口的功能作用以及自定义管道. 本场景为开发一个消息ZIP压缩的发送管道组件. 2 准备工作 1. 熟悉管道组件各阶段组成 2. 下载Ion ...
随机推荐
- OpenCV 中的三大数据类型( 概述 )
前言 OpenCV 提供了许多封装好了的类型,而其中,以三大类型最为核心.本文将大致介绍这三大类型. CvArr:不确定数组 它可以被视为一个抽象基类,后面的两大类型都继承此类型并扩展.只要某个函数的 ...
- 【BZOJ3771】Triple 生成函数+FFT
[BZOJ3771]Triple Description 我们讲一个悲伤的故事. 从前有一个贫穷的樵夫在河边砍柴. 这时候河里出现了一个水神,夺过了他的斧头,说: “这把斧头,是不是你的?” 樵夫一看 ...
- with(nolock) 与 with(readpast) 与不加此2个的区别
调试窗口一: 或者查询窗口一: 总之:事务没有结束 查询窗口二:
- Light OJ 1005 - Rooks 数学题解
版权声明:本文作者靖心.靖空间地址:http://blog.csdn.net/kenden23/,未经本作者同意不得转载. https://blog.csdn.net/kenden23/article ...
- Java8系列之重新认识HashMap(转)
转自美团电瓶技术团队:原文地址 简介 Java为数据结构中的映射定义了一个接口java.util.Map,此接口主要有四个常用的实现类,分别是HashMap.Hashtable.LinkedHashM ...
- Map总结--HashMap/HashTable/TreeMap/WeakHashMap使用场景分析(转)
首先看下Map的框架图 1.Map概述 1.Map是键值对映射的抽象接口 2.AbstractMap实现了Map中绝大部分的函数接口,它减少了“Map实现类”的重复编码 3.SortedMap有序的“ ...
- 【python】python版本升级,从2.6.6升级到2.7.13
centos6.5系统自带了2.6.6版本的python,有时候为了项目上的需要,需要将python版本升级到2.7.13,下面介绍了如何进行升级. 说明:python从2.6升级到2.7会引发很多问 ...
- 最新App Store审核指南与10大被拒理由
最近,苹果在官网给出了截至2015年2月份应用被拒绝的十大理由,其中50%以上的应用被拒绝都是因为这10个原因,其中7个理由和2014年相同,其中排名前三的原因分别是:需要补充更多信息.存在明显的bu ...
- 【Leetcode-easy】Reverse Integer
思路:取绝对值,反转,并判断反转的结果是否大于最大整数,需要注意的细节:判断时需要这样:result > (Integer.MAX_VALUE - v) / 10 否则result * 10 + ...
- IOS AppStore介绍图的尺寸大小(还有一些自己被拒的分享...)
4s:640*960 5:640*1136 6:750*1334 6P:1242*2208 -------现在新版本的iTunes connect里只上传6P版本的大小就可以了,其他版本苹果会自动分辨 ...