Angular 自定义管道
管道的作用就是将原始值进行转化处理,转换为所需要的值;
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 自定义管道的更多相关文章
- angular自定义管道
原文地址 https://www.jianshu.com/p/5140a91959ca 对自定义管道的认识 管道的定义中体现了几个关键点: 1.管道是一个带有“管道元数据(pipe metadata) ...
- Angular:管道和自定义管道
①管道的使用,更多管道在angular官网上有 <p>全部转为大写:{{'hahahah' | uppercase}}</p> <p>保留两位小数:{{1.4555 ...
- [转]Angular2 使用管道Pipe以及自定义管道格式数据
本文转自:https://www.pocketdigi.com/20170209/1563.html 管道(Pipe)可以根据开发者的意愿将数据格式化,还可以多个管道串联. 纯管道(Pure Pipe ...
- angular8自定义管道、指令以及获取dom值
版本: 1.自定义管道: example: 定义一个*ngFor 可以获取key值的管道 keyObject.pipe.ts // key value 管道 import { Pipe, PipeTr ...
- Angular自定义指令(directive)
angular自定义指令,意我们可以通过angula自己定义指令,来实现我们的特殊要求,为所欲为,一支穿云箭,千军万马来相见 多少年的老规矩了,先看代码: <!DOCTYPE html> ...
- 关于angular 自定义directive
关于angular 自定义directive的小结 首先我们创建一个名为"expander"的自定义directive指令: angular.module("myApp& ...
- angular 自定义指令详解 Directive
在angular中,Directive,自定义指令的学习,可以更好的理解angular指令的原理,当angular的指令不能满足你的需求的时候,嘿嘿,你就可以来看看这篇文章,自定义自己的指令,可以满足 ...
- Angular 4 管道
一.date管道 1.html 2. 控制器中的定义brithday 3.效果图 如果时间格式 为: 我的生日是{{birthday | date:'yyyy-MM-dd HH:mm:ss'}} 则效 ...
- Ocelot自定义管道中间件
Ocelot是啥就不介绍了哈,网关大家都知道,如果大家看过源码会发现其核心就是由一个个的管道中间件组成的,当然这也是Net Core的亮点之一.一个请求到来,会按照中间件的注册顺序进行处理,今天的问题 ...
随机推荐
- java虚拟机10.内存模型与线程
多任务处理在现代计算机操作系统中是一项必备的功能,让计算机同时去做几件事情,不仅是因为计算机的运算能力强大了,更重要的原因是计算机的运算速度与它的存储和通信子系统速度的差距太大,大量的时间都花费在磁盘 ...
- ST算法 Sliding Window algorithm template
ST算法(Sliding Window):A easy way to slove the substring problems algorithm template to slove substrin ...
- 通知&代理
通知:多对多的关系,比较耗性能 使用: 1.观察者到通知中心注册(接受那个发布者发布的什么通知,监听到通知后的处理方法) [[NSNotificationCenter defaultCenter] ...
- os.linesep提取当前平台使用的换行符
1. unix平台的换行符:\n 2.DOS/Win32平台的换行符:\r\n 3.通过os.linesep函数可以提取当前所处平台的换行符,从而实现不需要关注程序运行在什么平台,也不需要根据不同的平 ...
- LuoGuP1516 青蛙的约会 + 同余方程 拓展欧几里得
题意:有两只青蛙,在一个圆上顺时针跳,问最少的相遇时间. 这个是同余方程的思路.可列出方程:(m-n)* X% L = y-x(mod L) 简化为 a * x = b (mod L) (1 ...
- 在javascript中的浏览器兼容问题以及兼容浏览器汇总(默认事件,阻止冒泡,事件监听。。。)以及解决方式详解
在javascript中常见的浏览器兼容问题,以及解决方式. 在前端工作当中我们遵循这样的原则:渐进增强和优雅降级 渐进增强(progressive enhancement): 针对低版本浏览器进 ...
- Spring boot 全局配置 properties或者yml文件报错
主要问题是没有扫描到配置文件 在pom文件里面<build> </build>中加上以下代码就可以保证能扫描到了 <resources> <resour ...
- PHP-02.文件上传、php保存/转移上传的文件、常见的网络传输协议、请求报文及属性、响应报文及属性
关系数组 array("key"=>"value",...) ; get没有数据大小的限制 post上传大小没有限制 不指定上传方式,默认是get 文件上 ...
- innobackupex备份参数slave-info、safe-slave-backup
mysql物理备份用的比较多的是innobackupex命令,备份常用,但对于里面的两个参数slave-info.safe-slave-backup一直搞的不太明白,今儿亲测了一下. 先解释一下参数意 ...
- PyTorch在笔记本上实现CUDA加速
最近刚开始学习深度学习,参考了一篇深度学习的入门文章,原文链接:https://medium.freecodecamp.org/everything-you-need-to-know-to-maste ...