Angular8管道使用 Pipe

2021-10-06 19:21:55 字數 2517 閱讀 3180

每個應用開始的時候差不多都是一些簡單任務:獲取資料、轉換它們,然後把它們顯示給使用者。 獲取資料可能簡單到建立乙個區域性變數就行,也可能複雜到從 websocket 中獲取資料流。

一旦取到資料,你就可以把它們原始值的 tostring 結果直接推入檢視中。 但這種做法很少能具備良好的使用者體驗。 比如,幾乎每個人都更喜歡簡單的日期格式,例如1988-04-15,而不是服務端傳過來的原始字串格式 —— fri apr 15 1988 00:00:00 gmt-0700 (pacific daylight time)。

顯然,有些值最好顯示成使用者友好的格式。你很快就會發現,在很多不同的應用中,都在重複做出某些相同的變換。 你幾乎會把它們看做某種 css 樣式,事實上,你也確實更喜歡在 html 模板中應用它們 —— 就像 css 樣式一樣。

通過引入 angular 管道(一種編寫"從顯示到值"轉換邏輯的途徑),你可以把它宣告在 html 中。

/h1>

"font-weight: bold;"

>

1.日期:<

/p>

"color:red;"

>管道可以同時使用多個,鏈式管道。<

/p>

生日(日期大小寫顯示):

}<

/p>

"color:red;"

>引數用冒號隔開<

/p>

生日(格式化日期):

}<

/p>

生日(短日期):

}<

/p>

生日(長日期):

}<

/p>

"font-weight: bold;"

>

2.大小寫轉換:<

/p>

轉成大寫:

}<

/p>

轉成小寫:

}<

/p>

"font-weight: bold;"

>

3.貨幣百分比小數點:<

/p>

小數點"color:red;"

>('1.3-3'

:小數點前保留1位,小數點後保留3至3,即3位)<

/span>:

}<

/p>

貨幣預設:

}<

/p>

貨幣格式:

}<

/p>

百分比預設:

}<

/p>

百分比位數:

}<

/p>

"font-weight: bold;"

>

4.json格式:<

/p>

}<

/p>

html

/h1>

底數:"text"

[(ngmodel)]=

"bottom"

>

指數:

"text"

[(ngmodel)]=

"top"

>

結果:}

建立自定義管道

ng g pipe 路徑檔名
ts

angular官網

github例項

Angular 8 許可權控制

1.沒有許可權內的頁面,自動跳轉到 無法找到頁面 2.沒有許可權的按鈕,控制項不顯示 3.沒有登入token訪問需要登入的頁面,自動跳轉到 無法找到頁面 思路 用乙個service 去儲存登入使用者的許可權列表。在需要許可權控制的按鈕 控制項上通過 ngif 控制控制項可見性。在每個頁面 activ...

angular8 髒值檢查

什麼是髒值檢查?當資料改變時更新檢視 dom 什麼時候會觸發髒值檢查?瀏覽器事件 如click,mouseover,keyup等 settimeout 和setinterval http請求 如何進行檢測 檢查兩個狀態值 當前狀態和新狀態 import from angular core compo...

angular8 封裝元件

元件封裝的意義和方法 需要重用,或者簡化邏輯 ng generate component元件名 駝峰模式 使用index.ts方便匯入以及隔離內部變化對外部的影響 ng g c 元件名 駝峰模式 如果想在某個資料夾下新建元件 ng g c 檔名 元件名 駝峰模式 在每乙個資料夾下新建乙個index....