一.什么是Pipe?

就是管道，簡(jiǎn)單來(lái)說(shuō)，管道的作用就是傳輸。并且不同的管道具有不同的作用。(其實(shí)就是處理數(shù)據(jù))

二.pipe用法

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

三.Angular自帶的pipe函數(shù)

管道功能

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

JsonPipe??將輸入數(shù)據(jù)對(duì)象經(jīng)過(guò)JSON.stringify()方法轉(zhuǎn)換后輸出對(duì)象的字符串

UpperCasePipe??將文本所有小寫字母轉(zhuǎn)換成大寫字母

LowerCasePipe??將文本所有大寫字母轉(zhuǎn)換成小寫字母

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

CurrentcyPipe??將數(shù)值進(jìn)行貨幣格式化處理

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

PercentPipe??將數(shù)值轉(zhuǎn)百分比格

四、簡(jiǎn)單應(yīng)用

1、聲明一個(gè)管道ts，用于進(jìn)行運(yùn)算( name.pipe.ts )

// 導(dǎo)入模塊

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

// 管道名稱

@Pipe({

name: "name"

})

export class NamePipe implements PipeTransform {

// 參數(shù)說(shuō)明:

// value是在使用管道的時(shí)候,獲取的所在對(duì)象的值

// 后面可以跟若干個(gè)參數(shù)

// arg: 自定義參數(shù), 數(shù)字類型, 使用的時(shí)候, 使用冒號(hào)添加在管道名稱后面

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 }}

總結(jié)

以上是生活随笔為你收集整理的php+管道+pipe管道,angular2+管道pipe的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。