Angular管道PIPE的介紹與使用方法
前言
PIPE,翻譯為管道。Angular 管道是編寫可以在HTML組件中聲明的顯示值轉(zhuǎn)換的方法。Angular 管道之前在 AngularJS 中被稱為過(guò)濾器,從 Angular 2開始就被稱為管道。管道將數(shù)據(jù)作為輸入并將其轉(zhuǎn)換為所需的輸出。
Angular Pipes 將整數(shù)、字符串、數(shù)組和日期作為輸入,用| 分隔,然后根據(jù)需要轉(zhuǎn)換成格式,并在瀏覽器中顯示出來(lái)。在插值表達(dá)式中,可以定義管道并根據(jù)情況使用它,在 Angular 應(yīng)用程序中可以使用許多類型的管道。
內(nèi)建管道
- String -> String
- UpperCasePipe
- LowerCasePipe
- TitleCasePipe
- Number -> String
- DecimalPipe
- PercentPipe
- CurrencyPipe
- Object -> String
- JsonPipe
- DatePipe
- Tools
- SlicePipe
- AsyncPipe
- I18nPluralPipe
- I18nSelectPipe
使用方法
大寫轉(zhuǎn)換
<div> <p ngNonBindable>{{ 'Angular' | uppercase }}</p> <p>{{ 'Angular' | uppercase }}</p> <!-- Output: ANGULAR --> </div>
日期格式化
<div> <p ngNonBindable>{{ today | date: 'shortTime' }}</p> <p>{{ today | date: 'shortTime' }}</p> <!-- Output: 以當(dāng)前時(shí)間為準(zhǔn),輸出格式:10:40 AM --> </div>
數(shù)值格式化
<div> <p ngNonBindable>{{ 3.14159265 | number: '1.4-4' }}</p> <p>{{ 3.14159265 | number: '1.4-4' }}</p> <!-- Output: 3.1416 --> </div>
JavaScript 對(duì)象序列化
<div> <p ngNonBindable>{{ { name: 'semlinker' } | json }}</p> <p>{{ { name: 'semlinker' } | json }}</p> <!-- Output: { "name": "semlinker" } --> </div>
管道參數(shù)
管道可以接收任意數(shù)量的參數(shù),使用方式是在管道名稱后面添加:和參數(shù)值。如number: '1.4-4',若需要傳遞多個(gè)參數(shù)則參數(shù)之間用冒號(hào)隔開,具體示例如下:
<div> <p ngNonBindable>{{ 'semlinker' | slice:0:3 }}</p> <p>{{ 'semlinker' | slice:0:3 }}</p> <!-- Output: sem --> </div>
管道鏈
<div> <p ngNonBindable>{{ 'semlinker' | slice:0:3 | uppercase }}</p> <p>{{ 'semlinker' | slice:0:3 | uppercase }}</p> </div>
自定義管道
下面以過(guò)往項(xiàng)目中使用的管道為示例,講解自定義管道步驟:
- 使用 @Pipe 裝飾器定義 Pipe 的 metadata 信息,如 Pipe 的名稱 - 即 name 屬性
- 實(shí)現(xiàn) PipeTransform 接口中定義的 transform 方法
定義
import { Pipe, PipeTransform } from "@angular/core"; @Pipe({ name: "formatError" }) export class FormatErrorPipe implements PipeTransform { constructor() {} transform(value: any, module: string) { if (value.code) { return value.desc; } else { return value.message; } } }
使用
<div *ngIf="errorMessage"> <div class="message-box error mb-16" [@animate]="{value:'*',params:{opacity:'0',duration:'200ms'}}"> {{errorMessage.error | formatError:"auth"}} </div> </div>
總結(jié)
到此這篇關(guān)于Angular管道PIPE的文章就介紹到這了,更多相關(guān)Angular管道PIPE內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
詳解Angular.js的$q.defer()服務(wù)異步處理
相信大家都知道jquery和angular都有defer服務(wù),這篇文章暫以angular為例談?wù)剛€(gè)人的理解,在文章的最后并附上jquery的阮一峰總結(jié)的defer。有需要的朋友們也可以參考借鑒,下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2016-11-11angularJs使用ng-repeat遍歷后選中某一個(gè)的方法
今天小編就為大家分享一篇angularJs使用ng-repeat遍歷后選中某一個(gè)的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09學(xué)習(xí)AngularJs:Directive指令用法(完整版)
這篇文章主要學(xué)習(xí)AngularJs:Directive指令用法,內(nèi)容很全面,感興趣的小伙伴們可以參考一下2016-04-04詳解angularjs popup-table 彈出框表格指令
本篇文章主要介紹了angularjs popup-table 彈出框表格指令,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09Angular2仿照微信UI實(shí)現(xiàn)9張圖片上傳和預(yù)覽的示例代碼
本篇文章主要介紹了Angular2仿照微信UI實(shí)現(xiàn)9張圖片上傳和預(yù)覽的示例代碼,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-10-10