Angular最新教程-第十三节 管道Pipes 自定义管道

简介: Angular最新教程-第十三节 管道Pipes 自定义管道

自定义管道

运行ng generate pipe pipes/cny-currency

因为自定义管道使用的比较少,所以我们把管道都新建到pipes文件目录下。

打开\src\app\pipes\cny-currency.pipe.ts

image.png

这里我们编写了一个简单的管道,在输入的前面加上人民币符号,输出。

这里应该都很好理解,name是我们在html中使用的名字。

transform是管道的关键方法。

value是输入的值。可以指定类型。

args是可选参数,在使用的时候,就是名字后面加冒号的那些属性。

我们在\src\app\site-status\site-status.component.html中测试一下。

<li>在线访客:{{siteStatus.onlineNum|cnyCurrency}}</li>

image.png


链式管道

我们可以把管道链在一起,组合起来一起使用。

比如我们像让金额保留两位小数,并且加上人民币符号。

我们可以如下修改

<li>在线访客:{{siteStatus.onlineNum|number:'1.2-2'|cnyCurrency}}</li>

image.png


纯(pure)管道与非纯(impure)管道

默认的管道都是纯管道,我建议不要使用非纯管道。

纯管道和非纯管道的区别就是是否实时的检测数据是否发生变化。

如我们在使用纯管道的时候,简单的修改被绑定的数组,是不会刷新界面的。

所以我的建议是记下在修改数据的时候,直接更换整个数据,

而不是使用类似push这样的方法,修改数据内部。

因为这样的修改,不会触发Angular的纯管道调动。


没有过滤和排序

在AngularJS1.x中的filter和orderBy过滤器,在Angular中它们没有等价物。

如果需要使用这样的方法,可以通过编写一个服务,然后注入到函数中。

在绑定到页面之前对数据进行操作。

如果这的要在管道中使用过滤,也可以是用以下方法实现。

dataArrs.filter(item=>item.showType)


这节课的内容就到这里完成了。

感谢您的阅读。

我是莽夫,希望你开心。

目录
相关文章
|
4月前
|
Perl
【不明觉厉】Angular的 pure pipe (纯管道) 和 impure pipe (非纯管道) 是啥意思?
【不明觉厉】Angular的 pure pipe (纯管道) 和 impure pipe (非纯管道) 是啥意思?
【不明觉厉】Angular的 pure pipe (纯管道) 和 impure pipe (非纯管道) 是啥意思?
|
6月前
Angular HTTP 请求自定义 timeout 值的一种实现思路
Angular HTTP 请求自定义 timeout 值的一种实现思路
29 1
|
JavaScript 前端开发 API
让Angular自定义组件支持form表单验证
让Angular自定义组件支持form表单验证
114 0
|
JavaScript 数据安全/隐私保护 索引
Angular最新教程-第十四节 指令 结构型指令 属性型指令 自定义指令
Angular最新教程-第十四节 指令 结构型指令 属性型指令 自定义指令
156 0
Angular最新教程-第十四节 指令 结构型指令 属性型指令 自定义指令
|
JSON 前端开发 JavaScript
Angular最新教程-第十二节 管道Pipes 内置管道
Angular最新教程-第十二节 管道Pipes 内置管道
251 0
Angular最新教程-第十一节 路由四 (嵌套路由)
Angular最新教程-第十一节 路由四 (嵌套路由)
324 0
Angular最新教程-第十一节 路由四 (嵌套路由)
|
JavaScript 网络架构
Angular最新教程-第十节 路由三(路由器钩子函数、路由守卫)
Angular最新教程-第十节 路由三(路由器钩子函数、路由守卫)
247 0
Angular最新教程-第十节 路由三(路由器钩子函数、路由守卫)
|
2月前
|
设计模式 JavaScript 前端开发
什么是 Angular 应用里的 Custom provider
什么是 Angular 应用里的 Custom provider
30 2
|
3月前
Angular 应用里异步打开对话框的技术实现
Angular 应用里异步打开对话框的技术实现
22 0
|
16天前
|
存储 JavaScript 前端开发
Angular 应用 node_modules 子文件夹 @types 的作用介绍
Angular 应用 node_modules 子文件夹 @types 的作用介绍
12 1

热门文章

最新文章