angular管道操作符的使用

一、Angular的常用內置管道函數

比如說很多時候我們需要把數字顯示成金額、大小寫轉換、日期小數轉換等等。

Angular管道對於象這樣小型的轉換來說是個很方便的選擇。

管道是一個簡單的函數，它接受一個輸入值，並返回轉換結果。

下面說一些常用的管道：

1、大小寫轉換管道

uppercase將字符串轉換為大寫

lowercase將字符串轉換為小寫

<p>{{str | uppercase}}-{{str1 | lowercase}} </p>  //str:hello str1:WORLD

 頁面上顯示：HELLO-world

2、日期管道

date：日期管道符可以接受參數，用來規定輸出日期的格式。

<p>現在的時間是{{today | date:'yyyy-MM-dd HH:mm:ss'}}</p>

today = new Date();

頁面上顯示：現在的時間是2019-04-02 16:08:10

3、小數管道

number管道用來將數字處理為我們需要的小數格式

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

其中最少整數位數默認為1 

最少小數位數默認為0 

最多小數位數默認為3 

當小數位數少於規定的{最少小數位數}時，會自動補0 

當小數位數多於規定的{最多小數位數}時，會四舍五入

<p>num保留4位小數的值是：{{num | number:'3.2-4'}}</p>

num = 125.156896;

頁面上顯示：num保留4位小數的值是：125.1569

4、貨幣管道

currency管道用來將數字轉換為貨幣格式

  <p>數量：{{count}}</p>
  <p>價格：{{price}}</p>
  <p>總價：{{(price * count) | currency:'￥'}}</p>

  count = 5;
  price = 1.5;

頁面上顯示：

數量：5

價格：1.5

總價：$7.50

5、字符串截取

slice：start[：end]與java中substring類似

<p>{{name | slice : 2 : 4}}</p>

name = '只對你說';

 頁面上顯示：你說

6、json(數據)格式化

<div>
  <p>{{ { name: 'semlinker' } | json }}</p>
</div>

頁面上顯示：{ "name": "semlinker" }

二、自定義管道（過濾器）方法

 1、命令行新建一個管道multiple：

ng g pipe pipe/multiple

新建管道之后默認會在在app.module.ts文件中聲明

2、multiple.pipe.ts示例：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'multiple'
})
export class MultiplePipe implements PipeTransform {

  transform(value: any, args?: any): any {//value:輸入值 args:參數 if(!args){//無參的情況下
      args = 1;
    }
    return value*args;
  }

}

 3、在視圖模板中使用示例：

<p>測試管道用法:{{size | multiple}}</p>

<p>測試管道用法:{{size | multiple:'7'}}</p> //傳參

請注意以下幾點：

• 你使用自定義管道的方式和內置管道完全相同。

• 你必須在 AppModule 的 declarations 數組中包含這個管道。