一.什么是Pipe?

就是管道，簡單來說，管道的作用就是傳輸。并且不同的管道具有不同的作用。(其實就是處理數據)

二.pipe用法

{{ 輸入數據 | 管道 : 管道參數}}? (其中‘|’是管道操作符)

三.Angular自帶的pipe函數

管道功能

DatePipe??日期管道，格式化日期

JsonPipe??將輸入數據對象經過JSON.stringify()方法轉換后輸出對象的字符串

UpperCasePipe??將文本所有小寫字母轉換成大寫字母

LowerCasePipe??將文本所有大寫字母轉換成小寫字母

DecimalPipe??將數值按照特定的格式顯示文本

CurrentcyPipe??將數值進行貨幣格式化處理

SlicePipe??將數組或者字符串裁剪成新子集

PercentPipe??將數值轉百分比格

四、簡單應用

1、聲明一個管道ts，用于進行運算( name.pipe.ts )

// 導入模塊

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

// 管道名稱

@Pipe({

name: "name"

})

export class NamePipe implements PipeTransform {

// 參數說明:

// value是在使用管道的時候,獲取的所在對象的值

// 后面可以跟若干個參數

// arg: 自定義參數, 數字類型, 使用的時候, 使用冒號添加在管道名稱后面

transform(value:number, arg:number) {

return value * 10 * arg;

}

}

2、在app.module.ts主模塊中引入管道

import { name} from "../pipe/name.pipe";

@ngModule({

declarations: [

name

]

})

3、組件模板中使用

@Pipe管道的例子

{{ number | name: 10 }}