首頁 > 文章 > web前端 > 在Angular中有關管道操作符(|)用法

在Angular中有關管道操作符(|)用法

亚连原創: 2018-06-20 15:54:142735瀏覽

通常我們需要使用管道實現對資料的格式化，以下這篇文章主要給大家介紹了關於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:&#39;yyyy-MM-dd&#39;}}</p> 
 <p>{{number|percent}}</p> 
 <p>{{number|currency:&#39;CNY&#39;}}</p> 
</p>

ts 屬性：

export class AppComponent { 
 title = &#39;app&#39;; 
 name = &#39;张三丰&#39;; 
 time = new Date(); 
 number = 1.123; 
 show(str: string) { 
 str += &#39;---测试&#39;; 
 return str; 
 } 
}

顯示結果：