Angular中如何實(shí)現(xiàn)自定義管道

這篇文章給大家分享的是有關(guān)Angular中如何實(shí)現(xiàn)自定義管道的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

一、管道的作用

方便我們?cè)谀０逯袑?duì)我們的數(shù)據(jù)進(jìn)行格式化處理。

二、內(nèi)置的常用管道

具體API參照官網(wǎng)查詢使用

• DatePipe: 格式化日期

• UpperCasePipe: 文本轉(zhuǎn)為全部大寫

• LowerCasePipe: 文本轉(zhuǎn)為全部小寫

• TitleCasePipe: 文本轉(zhuǎn)為標(biāo)標(biāo)題形式(如: hello world=>Hello World)

• KeyValuePipe: 將對(duì)象轉(zhuǎn)為鍵值對(duì)形式

• JsonPipe: 轉(zhuǎn)為JSON字符串(調(diào)試代碼時(shí)還是很有用的)

三、Angular管道特點(diǎn)

• 管道串聯(lián)：將多個(gè)管道進(jìn)行串聯(lián)對(duì)一個(gè)數(shù)據(jù)進(jìn)行多次處理得到最終的效果。

• 管道優(yōu)先級(jí)：主要提到管道優(yōu)先級(jí)要大于三目表達(dá)式的優(yōu)先級(jí)，需要管道對(duì)三目表達(dá)式的結(jié)果處理請(qǐng)用小括號(hào)包裹。

• 純/非純管道：

• 管道默認(rèn)為純管道，純管道必須是純函數(shù)。

• 基礎(chǔ)類型和引用對(duì)象的引用變更時(shí)純管道執(zhí)行。

• 復(fù)合對(duì)象變更（更改數(shù)組元素）時(shí)非純管道執(zhí)行。

四、自定義管道三部曲

• 自定義管道類并實(shí)現(xiàn)PipeTransform接口

• 通過@Pipe裝飾器將新建的類聲明為Angular管道

• 注入管道，如在app.module.ts的declarations數(shù)組中配合新建的管道類

五、自定義管道項(xiàng)目實(shí)踐

背景：

• 我們最近需要在IE11瀏覽器上跑我們的Angular項(xiàng)目，因?yàn)樽铋_始沒有考慮IE的兼容問題，使得其中最明顯的一個(gè)問題得以暴露，我們的列表接口的時(shí)間列全都了。

• 因?yàn)榻涌诜祷氐臅r(shí)間格式大多是“yyyy-MM-dd hh:mm:ss”，為了避免一個(gè)舊數(shù)據(jù)格式的不統(tǒng)一我們還會(huì)在模板中使用DatePipe管道來再次格式化數(shù)據(jù)，但是在IE瀏覽器環(huán)境new Date("2020-12-12 13:10:54")會(huì)提示無效的時(shí)間。

處理：

• 通過搜索可以得到很多一致的處理方案就是將年月日中間的“-”進(jìn)行替換為“/”。

• 我考慮的解決方案就是通過自定義管道來對(duì)DatePipe擴(kuò)展，在自定義管道中加入判斷瀏覽器環(huán)境來對(duì)date字符串進(jìn)行處理。

遺留：

• 遺留問題就是全局替換的風(fēng)險(xiǎn)還是感覺有點(diǎn)高。。。有實(shí)用的方案請(qǐng)支招呀。

管道類說明

• transform函數(shù)實(shí)現(xiàn)自PipeTransform接口，參數(shù)value為我們需要處理的數(shù)據(jù)，參數(shù)args為按什么樣式來格式化。

• 通過return將我們處理后的數(shù)據(jù)進(jìn)行返回即可。

• 管道通Angular的模塊一樣需要進(jìn)行注冊(cè)后使用。

import { DatePipe } from "@angular/common";
import { Pipe, PipeTransform } from "@angular/core";

@Pipe({ name: "gDate", pure: true })
export class GDatePipe implements PipeTransform {
  transform(value: any, ...args: any[]) {
    let time = "";
    if (this.isIE()) {
      time = new DatePipe("en-US").transform(value.replace(/-/g, "/"), ...args);
    } else {
      time = new DatePipe("en-US").transform(value, ...args);
    }
    return time;
  }

  isIE(): boolean {
    return "ActiveXObject" in window;
  }
}

感謝各位的閱讀！關(guān)于“Angular中如何實(shí)現(xiàn)自定義管道”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！