什么是管道（PIPE）？本篇文章給大家介紹一下Angular中的管道（PIPE），聊聊內(nèi)置管道和自定義管道的方法，希望對(duì)大家有所幫助！

什么是管道（PIPE）

PIPE，翻譯為管道。Angular 管道是編寫可以在HTML組件中聲明的顯示值轉(zhuǎn)換的方法。Angular 管道之前在 AngularJS 中被稱為過濾器，從 Angular 2開始就被稱為管道。管道將數(shù)據(jù)作為輸入并將其轉(zhuǎn)換為所需的輸出?！鞠嚓P(guān)教程推薦：angular教程、編程教學(xué)】

簡(jiǎn)單來(lái)說，就是 Angular Pipes 可以幫我們把我們的輸入，包括字符串，整數(shù)和日期等等，按照我們的需要轉(zhuǎn)化為特定的格式并且在瀏覽器中顯示。通過插值表達(dá)式，我們可以定義管道并且在特定的情況下使用它，在 Angular 中提供給了我們?cè)S多種不同類型的管道，當(dāng)然，你甚至還可以去自定義管道。

舉一個(gè)比較簡(jiǎn)單的例子，日期的格式是多種多樣的，你可以通過管道，進(jìn)行各種格式之間的轉(zhuǎn)化，比如把秒數(shù)轉(zhuǎn)化為時(shí)分秒。

內(nèi)置管道

上面提到了，Angular 中提供給了我們?cè)S多種不同類型的管道，這些都是屬于 Angular 的內(nèi)置管道，至于內(nèi)置管道都有什么，要怎么用，下面通過代碼來(lái)演示一下。

時(shí)間管道 date

我們新建一個(gè) Angular 項(xiàng)目，并且在頁(yè)面中添加一個(gè) new Date()：

<div>{{data}}</div> ... export class AppComponent {   title = 'my-app';   data = new Date() }

頁(yè)面就會(huì)顯示當(dāng)前的時(shí)間：

那么我們接下去就可以使用內(nèi)置的管道來(lái)進(jìn)行一個(gè)時(shí)間格式的轉(zhuǎn)化，管道的語(yǔ)法需要在變量后面添加 | 符號(hào)，并且聲明管道

<div>{{data | date:'yyyy-MM-dd'}}</div>

這里我們用到了 date 這個(gè)管道，關(guān)于管道具體的參數(shù)詳情可以看一下官方文檔，里面介紹了它所提供的所有給你轉(zhuǎn)化的時(shí)間格式。

Angular – DatePipe

https://angular.cn/api/common/DatePipe#description

在我們?cè)O(shè)置好管道之后，瀏覽器中的時(shí)間已經(jīng)發(fā)生了變化了

其他管道

Angular還提供了其他管道，比如說改變?nèi)嗣麕鸥袷降墓艿溃╟urrency）：

Angular – CurrencyPipe

https://angular.cn/api/common/CurrencyPipe

還有將字符串轉(zhuǎn)化為大寫的管道（uppercase）：

<div>{{'ASDasd' | uppercase }}</div>

Angular – UpperCasePipe

https://angular.cn/api/common/UpperCasePipe

自定義管道

在上面我們介紹了幾種內(nèi)置管道，那萬(wàn)一要是內(nèi)置管道都不能滿足我們開發(fā)的需求，那么 Angular 還給我們提供了自定義管道，你可以自己去定一個(gè)管道，定義要去如何轉(zhuǎn)化輸入。

我們可以通過 Angular 提供給我們的命令行去快捷生成一個(gè)管道：

ng g p pipes/pipe-name

這里我創(chuàng)建了一個(gè)名為 test 的管道

在你運(yùn)行上面的指令之后，就會(huì)在 src 下為你創(chuàng)建一個(gè) pipes 的文件夾，里面保存著你的自定義管道

然后再 app 中 Angular 會(huì)自動(dòng)幫你引入這些管道，這樣你就能夠在全局每個(gè)地方使用自定義的管道。

接著看到在 pipes 文件夾下的管道，管道本質(zhì)上就是個(gè)類，這里使用裝飾器來(lái)為它取了個(gè) tests 的名字。

在這個(gè)類里面我們需要去實(shí)現(xiàn) PipeTransfrom 這個(gè)接口，也就是需要有 transform 這個(gè)方法，在這個(gè)方法中，第一個(gè)參數(shù)就是要放入管道的輸入，第二個(gè)數(shù)據(jù)是我們向管道傳遞的參數(shù)，管道中把它放入了一個(gè)數(shù)組里面。

這個(gè) transform 方法返回什么，我們的頁(yè)面拿到的就是什么數(shù)據(jù)，我們先來(lái)做一個(gè)測(cè)試

  transform(value: unknown, ...args: unknown[]): unknown {     return 'tests';   }   ...   <div>{{'ASDasd' | tests }}</div>

返回一個(gè)固定的字符串，并且在頁(yè)面中去使用它

可以看到返回的結(jié)果變成了 tests 字符串，這樣我們就可以確定這個(gè)方法的返回值就是最終的輸出。

接下來(lái)我們實(shí)現(xiàn)一個(gè)簡(jiǎn)單的字符串超出截取的管道：

  transform(value: string, ...args: number[]): string {     let defaultLength = 10;     if((args[0] || defaultLength )< value.length){       return value.substr(0,args[0] || defaultLength)+'...'     }else{       return value     }   }   ...   <div>{{'sssssssssssssssssssssssssssssss' | tests: 30 }}</div>

這樣就能夠?qū)ψ址M(jìn)行一個(gè)截取并且在尾部添加 ...

總結(jié)

本文我們學(xué)習(xí)了 Angular 中管道的使用，簡(jiǎn)單的來(lái)說管道就是一個(gè)方法，可以將你的輸入轉(zhuǎn)化為特定的你需要的輸出格式，Angular提供給了我們?cè)S多的內(nèi)置管道，當(dāng)內(nèi)置管道不滿足你的要求的時(shí)候，你還可以通過自定義管道來(lái)更加靈活的自定義輸出格式