一文聊聊Angular中的管道（PIPE）

什麼是管道（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 = &#39;my-app&#39;;
  data = new Date()
}

頁面就會顯示目前的時間：

#那麼我們接下去就可以使用內建的管道來進行一個時間格式的轉化，管道的語法需要在變數後面加上| 符號，並且宣告管道

<div>{{data | date:&#39;yyyy-MM-dd&#39;}}</div>

這裡我們用到了date 這個管道，關於管道具體的參數詳情可以看一下官方文檔，裡面介紹了它所提供的所有給你轉化的時間格式。

Angular - DatePipe

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

在我們設定好管道之後，瀏覽器中的時間已經發生了變化了

其他管道

Angular也提供了其他管道，比如說改變人名幣格式的管道（currency）：

Angular - CurrencyPipe

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

還有將字串轉換為大寫的管道（uppercase）：

<div>{{&#39;ASDasd&#39; | 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>{{&#39;ASDasd&#39; | 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)+&#39;...&#39;
    }else{
      return value
    }
  }
  ...
  <div>{{&#39;sssssssssssssssssssssssssssssss&#39; | tests: 30 }}</div>

这样就能够对字符串进行一个截取并且在尾部添加 ...

总结

---

本文我们学习了 Angular 中管道的使用，简单的来说管道就是一个方法，可以将你的输入转化为特定的你需要的输出格式，Angular提供给了我们许多的内置管道，当内置管道不满足你的要求的时候，你还可以通过自定义管道来更加灵活的自定义输出格式

更多编程相关知识，请访问：编程视频！！

以上是一文聊聊Angular中的管道（PIPE）的詳細內容。更多資訊請關注PHP中文網其他相關文章！