首页 > Angualr设置自定义管道Pipe（类似Vue的过滤器filters）货币格式化（实现内置管道CurrencyPipe的功能）

Angualr设置自定义管道Pipe（类似Vue的过滤器filters）货币格式化（实现内置管道CurrencyPipe的功能）

新建管道：

 

​​​​​​​ng g pipe pipes/money或​​​​​​​ng g p pipes/money

pipes/money.pipe.ts，同时在父级module.ts加入

import { MoneyPipe } from './pipes/money.pipe';

@NgModule({  declarations: [ ... ]})里面加入MoneyPipe

import { Pipe, PipeTransform } from '@angular/core';@Pipe({ name: 'money' })
export class MoneyPipe implements PipeTransform {transform(value: any, ...args: any[]): any {if (value) return (args[0] || '') + parseFloat(parseFloat(value).toFixed(2)).toLocaleString() + (args[1] || '');else return 0;return null;}}

app.component.html

{ {123456789.123456789 | money}}


{ {123456789.123456789 | money:'￥':'元'}}


{ {123456789.123456789 | money:'人民币':'万元'}}

呈现内容

额外的，pipe是可以多个联合使用，譬如酱紫↓

{ {123456789.123456789 | money | otherPipe | otherMorePipe}}

扩展阅读【不明觉厉】Angular的 pure pipe (纯管道) 和 impure pipe (非纯管道) 是啥意思？_你挚爱的强哥(http://www.shuzhiqiang.com)-CSDN博客纯管道和非纯管道是相对于管道所传的参数（如上例的 filterKey）而言的。如果管道是纯管道，只监听基本类型的参数的变化或者引用类型引用的变化（a primitive input value (String,Number,Boolean,Symbol) or a changed object reference (Date,Array,Function,Object)）；然而， 对于非纯管道，不管是基本类型参数的改变还是引用类型内部数据变化（而非引用变化）都可以触发管道。@Pip...https://blog.csdn.net/qq_37860634/article/details/120408160

更多相关：

  • linux进程通信：pipe实现进程同步

    文章目录通过管道同步进程实现代码管道缓冲区设置缓冲区大小总结 ：pipe的特点 通过管道同步进程 管道自带同步互斥机制： 管道的内核实现：fs/pipe.c ，主要通过内核的锁以及等待队列等机制实现 管道的write操作会阻塞进程 当内存缓冲区已满或被读进程锁定，会阻塞write操作当所有数据被写入管道时write操作才会结...

  • 进程间通信--命名管道

    几个术语 二义性：当我们往一个管道里面写端写数据的时候，比如写一个hello的时候，当我们写到he的时候，读端就已经开始读取数据了，所以这是不对的，这就是二义性临界资源：多个流可以访问的一个共同的存储资源临界区：访问临界资源的代码叫做临界区互斥：任一时候只能有一个进程利用临界资源访问临界区，并且是以原子性访问原子性：要么访问，要么没...

  • web框架

    转载：https://www.cnblogs.com/huang-yc/p/9647815.html 本文为纯属个人学习笔记，如有疏漏错误之处望前辈指正！ 1. web 应用        Web应用程序是一种可以通过Web访问的应用程序，程序的最大好处是用户很容易访问应用程序，用户只需要有浏览器即可，不需要再安装其他软件。 　　应用...

©2024 11GX.COM