管道的作用就是将原始值进行转化处理,转换为所需要的值;


1. 新建sex-reform.pipe.ts文件

ng g pipe sex-reform

2. 编辑sex-reform.pipe.ts文件


import { Pipe, PipeTransform } form '@angular/core'; //引入PipeTransform是为了继承transform方法 @Pipe({ name: 'sexReform' }) //name属性值惯用小驼峰是写法, name的值为html中| 后面的名称 export class SexReformPipe implements PipeTransform {
transform(value: string, args?: any): string {
switch(value){
case 'male': return '男';
case 'female': return '女';
default: return '雌雄同体';
}
}
}

3. 使用demo组件中使用自定义管道

// demo.component.ts
export Class DemoComponent {
sexValue = 'male';
} // demo.component.html
<span>{{ sexValue | sexReform }}</span> // 浏览器输出
  • 同@Component({})和@NgModel({})一样,@Pipe({})代表这是一个管道,里面定义了一组元数据,用来告诉angular这个管道是如何工作的;

  • 每一个自定义管道都需要实现PipeTransform接口, transform方法用来对传入的值进行一系列处理,最后转化为需要的值后return即可;

  • transform()方法参数格式 - transform(value: string, args1: any, args2: any): value为传入的值(即为需要用此管道处理的值, | 前面的值); args 为传入的参数(?:代表可选);

  • html中使用管道格式 - {{ 数据 | 管道名 : 参数1 : 参数2 }}

Angular 自定义管道的更多相关文章

  1. angular自定义管道

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

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

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

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

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

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

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

  5. Angular自定义指令(directive)

    angular自定义指令,意我们可以通过angula自己定义指令,来实现我们的特殊要求,为所欲为,一支穿云箭,千军万马来相见 多少年的老规矩了,先看代码: <!DOCTYPE html> ...

  6. 关于angular 自定义directive

    关于angular 自定义directive的小结 首先我们创建一个名为"expander"的自定义directive指令: angular.module("myApp& ...

  7. angular 自定义指令详解 Directive

    在angular中,Directive,自定义指令的学习,可以更好的理解angular指令的原理,当angular的指令不能满足你的需求的时候,嘿嘿,你就可以来看看这篇文章,自定义自己的指令,可以满足 ...

  8. Angular 4 管道

    一.date管道 1.html 2. 控制器中的定义brithday 3.效果图 如果时间格式 为: 我的生日是{{birthday | date:'yyyy-MM-dd HH:mm:ss'}} 则效 ...

  9. Ocelot自定义管道中间件

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

随机推荐

  1. 别说你不会开发exe程序,拿走不谢。

    本文重点介绍如何将我们写的java代码打包成在电脑上可以运行的exe文件 本文重点介绍如何将我们写的java代码打包成在电脑上可以运行的exe文件.这里只介绍直接打包成exe的方法,至于打包成exe安 ...

  2. 使用Python爬取淘宝两千款套套

    各位同学们,好久没写原创技术文章了,最近有些忙,所以进度很慢,给大家道个歉. 警告:本教程仅用作学习交流,请勿用作商业盈利,违者后果自负!如本文有侵犯任何组织集团公司的隐私或利益,请告知联系猪哥删除! ...

  3. Codeforces 369 C Valera and Elections

    Valera and Elections 题意:现在有n个候选人, 有n-1条路, 如果选择了这个候选人, 这个候选人就会将从自己这个城市到1号城市上所有坏的路都修复一下,现在求最小的候选人数目, 如 ...

  4. 【Offer】[22] 【链表中倒数第k个结点】

    题目描述 思路分析 测试用例 Java代码 代码链接 题目描述 输入一个链表,输出该链表中倒数第k个结点. 思路分析 采用双指针的方法,第一个指针首先向前移动k-1个位置,第二个指针指向头节点,然后将 ...

  5. 如何完美激活pycharm2019.2.2

    本号持续关注pycharm的更新,这不本月11号迎来新版本,为防走丢,请关注公众号,让我们携手并行!有道是"予人玫瑰手留余香",分享的确是件令人愉快的事,这也是我创建公众号的初心. ...

  6. (转)java程序调用内存变化过程分析(详细)

    原博地址: https://blog.csdn.net/Myuhua/article/details/81385609 (一)不含静态变量的java程序运行时内存变化过程分析 代码: package ...

  7. 在VMware中就显示lo回环IP:127.0.0.1的解决办法。

    在VMware时由于某些原因导致,在使用ifconfig只会显示lo,不显示其他的东西 步骤:1.sudo lshw -numeric -class network 2.sudo route -nv ...

  8. DDD领域驱动实践记录

    虽然很早之前就已经了解过DDD相关的内容了,但一方面网上理论知识太过碎片化导致难以理解,另一方面实践内容太少导致想动手的时候无从下手.于是就渐渐淡忘了这方面实践的念头. 最近重新了解了DDD相关的知识 ...

  9. python根据搜索词下载百度图片

    # coding=utf-8 """根据搜索词下载百度图片""" import re import urllib import os def ...

  10. 作为Java开发人员不会饿死的5个理由

    尽管已有20多年的历史,Java仍然是最广泛使用的编程语言之一.只需看看统计数据:根据2018年Stack Overflow开发人员调查,Java是世界上第三大最受欢迎的技术. TIOBE指数,这是一 ...