什麼是管道（PIPE）？這篇文章跟大家介紹一下Angular中的管道（PIPE），聊聊內建管道和自訂管道的方法，希望對大家有所幫助！
什麼是管道（PIPE）
PIPE，翻譯為管道。 Angular 管道是一種編寫可以在HTML元件中宣告的顯示值轉換的方法。 Angular 管道之前在 AngularJS 中被稱為過濾器，從 Angular 2開始就被稱為管道。管道將資料作為輸入並將其轉換為所需的輸出。 【相關教學推薦：angular教學、程式設計教學】
簡單來說，就是Angular Pipes 可以幫我們把我們的輸入，包括字串，整數和日期等等，按照我們的需要轉換為特定的格式並且在瀏覽器中顯示。透過插值表達式，我們可以定義管道並且在特定的情況下使用它，在 Angular 中提供給了我們許多不同類型的管道，當然，你甚至可以去自訂管道。
舉一個比較簡單的例子，日期的格式是多種多樣的，你可以透過管道，進行各種格式之間的轉化，例如把秒數轉化為時分秒。
內建管道
#上面提到了，Angular 中提供給了我們許多不同類型的管道，這些都是屬於Angular 的內建管道，至於內建管道都有什麼，要怎麼用，下面透過程式碼來示範一下。
時間管道date
我們新建一個Angular 項目，並且在頁面中新增一個new Date()：
<div>{{data}}</div>
...
export class AppComponent {
title = 'my-app';
data = new Date()
}登入後複製
頁面就會顯示目前的時間：
#那麼我們接下去就可以使用內建的管道來進行一個時間格式的轉化，管道的語法需要在變數後面加上| 符號，並且宣告管道
<div>{{data | date:'yyyy-MM-dd'}}</div>登入後複製
這裡我們用到了date 這個管道，關於管道具體的參數詳情可以看一下官方文檔，裡面介紹了它所提供的所有給你轉化的時間格式。
Angular - DatePipe
https://angular.cn/api/common/DatePipe#description
在我們設定好管道之後，瀏覽器中的時間已經發生了變化了
其他管道
Angular也提供了其他管道，比如說改變人名幣格式的管道（currency）：
Angular - CurrencyPipe
https://angular.cn/api/common/CurrencyPipe
還有將字串轉換為大寫的管道（uppercase）：
<div>{{'ASDasd' | uppercase }}</div>登入後複製
Angular - UpperCasePipe
#https: //angular.cn/api/common/UpperCasePipe
自訂管道
在上面我們介紹了幾種內建管道，那萬一要是內建管道都無法滿足我們開發的需求，那麼Angular 也給我們提供了自訂管道，你可以自己去定一個管道，定義要去如何轉換輸入。
我們可以透過Angular 提供給我們的命令列去快速產生一個管道：
ng g p pipes/pipe-name
登入後複製
這裡我建立了一個名為test 的管道
在你執行上面的指令之後，就會在src 下為你建立一個pipes 的資料夾，裡面保存著你的自訂管道
然後再app 中Angular 會自動幫你引入這些管道，這樣你就能夠在全局每個地方使用自訂的管道。
接著看到在 pipes 資料夾下的管道，管道本質上就是個類，這裡使用裝飾器來為它取了個 tests 的名字。
在这个类里面我们需要去实现 PipeTransfrom 这个接口，也就是需要有 transform 这个方法，在这个方法中，第一个参数就是要放入管道的输入，第二个数据是我们向管道传递的参数，管道中把它放入了一个数组里面。
这个 transform 方法返回什么，我们的页面拿到的就是什么数据，我们先来做一个测试
transform(value: unknown, ...args: unknown[]): unknown {
return 'tests';
}
...
<div>{{'ASDasd' | tests }}</div>登入後複製
返回一个固定的字符串，并且在页面中去使用它
可以看到返回的结果变成了 tests 字符串，这样我们就可以确定这个方法的返回值就是最终的输出。
接下来我们实现一个简单的字符串超出截取的管道：
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>登入後複製
这样就能够对字符串进行一个截取并且在尾部添加 ...
总结
本文我们学习了 Angular 中管道的使用，简单的来说管道就是一个方法，可以将你的输入转化为特定的你需要的输出格式，Angular提供给了我们许多的内置管道，当内置管道不满足你的要求的时候，你还可以通过自定义管道来更加灵活的自定义输出格式
更多编程相关知识，请访问：编程视频！！
以上是一文聊聊Angular中的管道（PIPE）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
