1. 說明
管道用來轉換模板顯示的內容，應用程式中經常出現獲取資料，轉換資料，顯示資料的邏輯。管道就是用來在轉換資料階段起作用的。主要存在兩種型別的管道，pure pipe和impure pipe
2. pure pipe
pure pipe，stateless，關注於純粹物件的變更，檢測到輸入值發生了純變更時才會執行純管道。純變更是指對原始型別值 (string、number、boolean、symbol) 的更改， 或者對物件引用 (date、array、function、object) 的更改。針對複雜物件內部元素的變更不會影響到純粹管道的執行。常見的內建管道
名稱
用法
說明
currencypipe
expression | currency[:currencycode[:symboldisplay[:digitinfo]]]
將資料轉化為指定格式的金額格式輸出
datepipe
expression | date[:format]
將時間資料轉換為指定格式的字串
decimalpipe
expression | number[:digitinfo]
將資料轉化為指定格式的資料格式輸出
lowercasepipe
expression | lowercase
將資料轉化為小寫輸出
uppercasepipe
expression | uppercase
將資料轉化為大寫輸出
jsonpipe
expression | json
將資料轉化為json格式輸出
slicepipe
expression | slice:start[:end]
獲取指定位置從start到end的資料
3. impure pipe
impure pipe，stateful，angular 會在每個元件的變更檢測週期中執行非純管道。 非純管道可能會被呼叫很多次，和每個按鍵或每次滑鼠移動一樣頻繁。常見的內建非純管道有
名稱
用法
說明
asyncpipe
object | async
接受乙個 promise 或 observable 作為輸入，並且自動訂閱這個輸入，最終返回它們給出的值
4. 如何使用
管道把資料作為輸入，然後轉換它，給出期望的輸出。管道使用包括三個方面：
(1). 表示式語法的寫法
(2). 如何引數設定
(3). 多個管道如何同時使用
從下面的例子可以很方便的看出來以上三個方面如何編寫，?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
importfrom'@angular/core';
@component(}
`,
})
exportclass
birthday: date =newdate(2012,10,10);
}
表示式的寫法：在插值表示式中資料的右側通過管道操作符( | ) 及 右側的管道函式 來表示
如何設定引數：在管道函式的後面新增乙個冒號 ( : ) 再跟乙個引數值，來為管道新增引數
多個管道同時使用：在插值表示式資料後面可以同時採用多個管道操作符( | ) 及 右側的管道函式來表示多個管道，執行順位為從左到右依次執行。
5. 自定義管道
我們來編寫乙個自定義管道，管道的含義是擷取指定長度的字串。
5.1 模組
首先我們引入對應的模組及函式pipe
import from '@angular/core';
5.2 註解
從@angular/core中匯入pipe及pipetransform函式後，可以使用@ pipe ()來標示元件類為乙個pipe，@標示註解的一種標識，用來普通類附加對應的元資料資訊。
5.3 元資料
@pipe將元資料的資訊附加到類上，我們來了解一下常用的元資料資訊都有哪些：
@directive()
name：管道的名稱，表示在使用管道所採用的名稱，例如 date等，
pure：布林值，純管道或者非純管道
5.4 管道類
管道類包含實現資料轉化的主要邏輯，管道類必須實現pipetransform的transform的方法，在資料轉化過程中會自動呼叫這個方法，並將結果返回。我們實現擷取的管道類**如下?
1
2
3
4
5
6
7
8
9
exportclasssubpipeimplementspipetransform
}
最後實現的**如下：?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
importfrom'@angular/core';
@pipe()
exportclasssubpipeimplementspipetransform
}
angular2自定義管道省略字元
要求是中文的時候顯示10個字元，英文的時候顯示20個字元，不知道怎麼具體實現,就想到了管道 下面是實現方法 1.自定義實現乙個管道功能，繼承了方法，還處在看api的狀態,具體怎麼實現的還沒弄清楚 2.transform引數的方法 首先宣告管道,繼承方法transform，如圖所示，除了第乙個是傳過來...
Angular4中自定義管道
angular 是由谷歌開發與維護乙個開發跨平台應用程式的框架，同時適用於手機與桌面。管道的作用是把資料作為輸入，然後轉換它，給出期望的輸出。7.1 使用管道 如 import from angular core component export class herobirthdaycomponen...
Angular2 如何搭建
在任意目錄下建立乙個我們的angular2.0 比如d angular myangular2 在d angular myangular2下建立名為 package.json tsconfig.json typings.json systemjs.config.js等四個檔案 檔案內容可到 位址下檢視...