你可以透過組態管道,進一步發揮管道的用途。管道可以透過傳入選項來組態。
NOTE: 在深入指南中進一步了解如何使用管道格式化資料。
在這個練習中,你將使用一些管道與管道參數。
要把參數傳給管道,請使用 : 語法,後面接著參數值。範例如下:
template: `{{ date | date: 'medium' }}`;
輸出是 Jun 15, 2015, 9:43:11 PM。
是時候自訂一些管道輸出了:
-
使用
DecimalPipe格式化數字在
app.ts中,更新範本,為decimal管道加入參數。template: ` ... <li>Number with "decimal" {{ num | number: '3.2-2' }}</li> `NOTE: 那是什麼格式?
DecimalPipe的參數稱為digitsInfo,這個參數使用以下格式:{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits} -
使用
DatePipe格式化日期現在,更新範本,使用
date管道。template: ` ... <li>Date with "date" {{ birthday | date: 'medium' }}</li> `想多一點樂趣,可以為
date試試不同的參數。更多資訊可以在 Angular 文件中找到。 -
使用
CurrencyPipe格式化貨幣最後一個任務,更新範本,使用
currency管道。template: ` ... <li>Currency with "currency" {{ cost | currency }}</li> `你也可以為
currency試試不同的參數。更多資訊可以在 Angular 文件中找到。
你把管道用得很好。你目前為止已經取得了很大的進展。
還有更多內建管道可以在你的應用程式中使用。你可以在 Angular 文件中找到完整清單。
如果內建管道無法滿足你的需求,你也可以建立自訂管道。查看下一課了解更多。