Angular管道PIPE的介紹與使用方法
前言
PIPE,翻譯為管道。Angular 管道是編寫可以在HTML組件中聲明的顯示值轉換的方法。Angular 管道之前在 AngularJS 中被稱為過濾器,從 Angular 2開始就被稱為管道。管道將數據作為輸入並將其轉換為所需的輸出。
Angular Pipes 將整數、字符串、數組和日期作為輸入,用| 分隔,然後根據需要轉換成格式,並在瀏覽器中顯示出來。在插值表達式中,可以定義管道並根據情況使用它,在 Angular 應用程序中可以使用許多類型的管道。
內建管道
- String -> String
- UpperCasePipe
- LowerCasePipe
- TitleCasePipe
- Number -> String
- DecimalPipe
- PercentPipe
- CurrencyPipe
- Object -> String
- JsonPipe
- DatePipe
- Tools
- SlicePipe
- AsyncPipe
- I18nPluralPipe
- I18nSelectPipe
使用方法
大寫轉換
<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: 以當前時間為準,輸出格式:10:40 AM --> </div>
數值格式化
<div> <p ngNonBindable>{{ 3.14159265 | number: '1.4-4' }}</p> <p>{{ 3.14159265 | number: '1.4-4' }}</p> <!-- Output: 3.1416 --> </div>
JavaScript 對象序列化
<div> <p ngNonBindable>{{ { name: 'semlinker' } | json }}</p> <p>{{ { name: 'semlinker' } | json }}</p> <!-- Output: { "name": "semlinker" } --> </div>
管道參數
管道可以接收任意數量的參數,使用方式是在管道名稱後面添加:和參數值。如number: ‘1.4-4’,若需要傳遞多個參數則參數之間用冒號隔開,具體示例如下:
<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>
自定義管道
下面以過往項目中使用的管道為示例,講解自定義管道步驟:
- 使用 @Pipe 裝飾器定義 Pipe 的 metadata 信息,如 Pipe 的名稱 – 即 name 屬性
- 實現 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>
總結
到此這篇關於Angular管道PIPE的文章就介紹到這瞭,更多相關Angular管道PIPE內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- Angular性能優化之第三方組件和懶加載技術
- Angular處理未可知異常錯誤的方法詳解
- Angular 獨立組件入門指南
- 淺談Angular的12個經典問題
- Vue.js React與Angular流行前端框架優勢對比