場景

angular中的管道(pipe)是用來對輸入的數(shù)據(jù)進行處理，如大小寫轉(zhuǎn)換、數(shù)值和日期格式化等。

Angular介紹、安裝Angular Cli、創(chuàng)建Angular項目入門教程：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105570017

Angular新建組件以及組件之間的調(diào)用：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105694997

通過以上搭建起Angular項目。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
關(guān)注公眾號
霸道的程序猿
獲取編程相關(guān)電子書、教程推送與免費下載。

實現(xiàn)

大小寫轉(zhuǎn)換

首先聲明兩個大小寫的字符串屬性

? public str ="badao"public str2 ="BADAO"

然后轉(zhuǎn)換

<p>{{str | uppercase}}</p> <p>{{str2 | lowercase}}</p>

?

日期格式轉(zhuǎn)換

聲明日期屬性

public today = new Date();

轉(zhuǎn)換

<p>{{today | date:'yyyy-MM-dd HH:mm:ss' }}</p>

?

小數(shù)位數(shù)

接收的參數(shù)格式為{最少整數(shù)位數(shù)}.{最少小數(shù)位數(shù)}-{最多小數(shù)位數(shù)}

public number =1.23456789

轉(zhuǎn)換

<p>{{ number | number:'1.2-4'}}</p>

?

JS對象序列化

<p>{{ {name :'badao'} | json}}</p>

?

Slice

<p>{{ 'badaoliumang' | slice:0:5}}</p>

?

通道鏈

<p>{{ 'badaoliumang' | slice:0:5 | uppercase}}</p>

?

?

總結(jié)

以上是生活随笔為你收集整理的Anuglar中的常用通道-大小写转换、日期转换、小数位数、Json、slice、管道链的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。