Angualr设置自定义管道Pipe(类似Vue的过滤器filters)货币格式化(实现内置管道CurrencyPipe的功能)
新建管道:
?
???????ng g pipe pipes/money或???????ng g p pipes/money
pipes/money.pipe.ts,同時(shí)在父級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
<h1>{{123456789.123456789 | money}}</h1>
<h1>{{123456789.123456789 | money:'¥':'元'}}</h1>
<h1>{{123456789.123456789 | money:'人民幣':'萬元'}}</h1>
呈現(xiàn)內(nèi)容
額外的,pipe是可以多個(gè)聯(lián)合使用,譬如醬紫↓
<h1>{{123456789.123456789 | money | otherPipe | otherMorePipe}}</h1>
擴(kuò)展閱讀【不明覺厲】Angular的 pure pipe (純管道) 和 impure pipe (非純管道) 是啥意思?_你摯愛的強(qiáng)哥(http://www.shuzhiqiang.com)-CSDN博客純管道和非純管道是相對于管道所傳的參數(shù)(如上例的 filterKey)而言的。如果管道是純管道,只監(jiān)聽基本類型的參數(shù)的變化或者引用類型引用的變化(a primitive input value (String,Number,Boolean,Symbol) or a changed object reference (Date,Array,Function,Object));然而, 對于非純管道,不管是基本類型參數(shù)的改變還是引用類型內(nèi)部數(shù)據(jù)變化(而非引用變化)都可以觸發(fā)管道。@Pip...https://blog.csdn.net/qq_37860634/article/details/120408160
總結(jié)
以上是生活随笔為你收集整理的Angualr设置自定义管道Pipe(类似Vue的过滤器filters)货币格式化(实现内置管道CurrencyPipe的功能)的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Angular使用@Input和@Out
- 下一篇: Angular给HTML节点绑定自定义属