一、管道的作用及本质

作用:数据处理

本质:公用的方法

二、定义管道组件

//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}}&nbsp;</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自定义管道的更多相关文章

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

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

  2. angular自定义管道

    原文地址 https://www.jianshu.com/p/5140a91959ca 对自定义管道的认识 管道的定义中体现了几个关键点: 1.管道是一个带有“管道元数据(pipe metadata) ...

  3. Angular 自定义管道

    管道的作用就是将原始值进行转化处理,转换为所需要的值: 1. 新建sex-reform.pipe.ts文件 ng g pipe sex-reform 2. 编辑sex-reform.pipe.ts文件 ...

  4. Ocelot自定义管道中间件

    Ocelot是啥就不介绍了哈,网关大家都知道,如果大家看过源码会发现其核心就是由一个个的管道中间件组成的,当然这也是Net Core的亮点之一.一个请求到来,会按照中间件的注册顺序进行处理,今天的问题 ...

  5. angular8自定义管道、指令以及获取dom值

    版本: 1.自定义管道: example: 定义一个*ngFor 可以获取key值的管道 keyObject.pipe.ts // key value 管道 import { Pipe, PipeTr ...

  6. Angular:管道和自定义管道

    ①管道的使用,更多管道在angular官网上有 <p>全部转为大写:{{'hahahah' | uppercase}}</p> <p>保留两位小数:{{1.4555 ...

  7. 【angular5项目积累总结】自定义管道 OrderBy

    import { Injectable, Pipe } from '@angular/core'; @Pipe({ name: 'orderBy' }) @Injectable() export cl ...

  8. angular之自定义管道

    1,装了angular2 的 cli之后,cmd中命令建立个管道文件 ng g p <name>; 如建一个在pipe文件中建一个add.pipe.ts文件 可以这么么写 ng g p p ...

  9. BizTalk动手实验(十一)自定义开发管道组件

    1 课程简介 通过本课程熟悉自定义开始管道组件的流程.各组件接口的功能作用以及自定义管道. 本场景为开发一个消息ZIP压缩的发送管道组件. 2 准备工作 1. 熟悉管道组件各阶段组成 2. 下载Ion ...

随机推荐

  1. OpenCV 中的三大数据类型( 概述 )

    前言 OpenCV 提供了许多封装好了的类型,而其中,以三大类型最为核心.本文将大致介绍这三大类型. CvArr:不确定数组 它可以被视为一个抽象基类,后面的两大类型都继承此类型并扩展.只要某个函数的 ...

  2. 【BZOJ3771】Triple 生成函数+FFT

    [BZOJ3771]Triple Description 我们讲一个悲伤的故事. 从前有一个贫穷的樵夫在河边砍柴. 这时候河里出现了一个水神,夺过了他的斧头,说: “这把斧头,是不是你的?” 樵夫一看 ...

  3. with(nolock) 与 with(readpast) 与不加此2个的区别

    调试窗口一: 或者查询窗口一: 总之:事务没有结束 查询窗口二:

  4. Light OJ 1005 - Rooks 数学题解

    版权声明:本文作者靖心.靖空间地址:http://blog.csdn.net/kenden23/,未经本作者同意不得转载. https://blog.csdn.net/kenden23/article ...

  5. Java8系列之重新认识HashMap(转)

    转自美团电瓶技术团队:原文地址 简介 Java为数据结构中的映射定义了一个接口java.util.Map,此接口主要有四个常用的实现类,分别是HashMap.Hashtable.LinkedHashM ...

  6. Map总结--HashMap/HashTable/TreeMap/WeakHashMap使用场景分析(转)

    首先看下Map的框架图 1.Map概述 1.Map是键值对映射的抽象接口 2.AbstractMap实现了Map中绝大部分的函数接口,它减少了“Map实现类”的重复编码 3.SortedMap有序的“ ...

  7. 【python】python版本升级,从2.6.6升级到2.7.13

    centos6.5系统自带了2.6.6版本的python,有时候为了项目上的需要,需要将python版本升级到2.7.13,下面介绍了如何进行升级. 说明:python从2.6升级到2.7会引发很多问 ...

  8. 最新App Store审核指南与10大被拒理由

    最近,苹果在官网给出了截至2015年2月份应用被拒绝的十大理由,其中50%以上的应用被拒绝都是因为这10个原因,其中7个理由和2014年相同,其中排名前三的原因分别是:需要补充更多信息.存在明显的bu ...

  9. 【Leetcode-easy】Reverse Integer

    思路:取绝对值,反转,并判断反转的结果是否大于最大整数,需要注意的细节:判断时需要这样:result > (Integer.MAX_VALUE - v) / 10 否则result * 10 + ...

  10. IOS AppStore介绍图的尺寸大小(还有一些自己被拒的分享...)

    4s:640*960 5:640*1136 6:750*1334 6P:1242*2208 -------现在新版本的iTunes connect里只上传6P版本的大小就可以了,其他版本苹果会自动分辨 ...