通常我們需要使用管道實現對資料的格式化，以下這篇文章主要給大家介紹了關於Angular中管道操作符(|)的使用方法，文中透過範例程式碼介紹的非常詳細，需要的朋友可以參考借鑒，下面隨著小編來一起學習學習吧。
管道是什麼？
Angular的管道可以看成是一個資料格式化展示的工具。管道可以將資料格式化顯示，而不改變來源資料。例如關於日期的展示，對於來源資料使用管道1可以以yyyy/MM/dd來展示，也可以使用管道2展示成Feb 28, 2017的形式。但原數據仍是date，並沒有改變。利用管道我們可以將資料格式化的內容剝離出來，使其獨立，有需要格式化展示的時候選擇相應的管道進行處理即可。
一、範本運算式運算子
範本運算式語言使用了JavaScript 語法的子集，並補充了幾個用於特定場景的特殊操作符：管道操作符、安全導航操作符。
二、管道運算子 (|)
#在綁定之前，表達式的結果可能需要一些轉換。例如，可能希望吧數字顯示成金額、強製文字變成大寫，或過濾清單以及進行排序。
Angular 管道物件這樣的小型轉換來說是個很方便的選擇。
管道是一個簡單的函數，它接受一個輸入值，並傳回轉換結果。
Angular 的常用內建管道函數：
DatePipe，UpperCasePipe，LowerCasePipe，CurrencyPipi，PercentPipe，JsonPipe等。
它們用於模板表達式中，只要使用管道運算子(|) 就行了。
使用方法
管道運算子會把它左邊的表達式結果傳給它右邊的管道函數。也可以透過多個管道串聯表達式。
<p>
Title through a pipe chain:
{{title | uppercase | lowercase}}
</p>常用實例：
<p class="alert alert-warning">
<p>{{title|uppercase }}</p>
<p>{{title|uppercase|lowercase }}</p>
<p>{{this|json}}</p>
<p>{{time|date:'yyyy-MM-dd'}}</p>
<p>{{number|percent}}</p>
<p>{{number|currency:'CNY'}}</p>
</p>ts 屬性：
export class AppComponent {
title = 'app';
name = '张三丰';
time = new Date();
number = 1.123;
show(str: string) {
str += '---测试';
return str;
}
}顯示結果：
以上是在Angular中有關管道操作符(|)用法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
