如何在 Angular 中創(chuàng)建自定義管道，什么是純管道和不純管道，以及如何使用純管道來(lái)提高應(yīng)用程序的性能。Angular 中的管道是組件模板表達(dá)式中使用的函數(shù)，用于將值轉(zhuǎn)換為其他顯示格式。Angular 具有多個(gè)內(nèi)置管道，如日期管道、異步管道等。但是，如果這些管道不能滿(mǎn)足我們的需求，我們可以創(chuàng)建自己的管道。

　　在本文中，我們將研究：

　　如何在角度中創(chuàng)建自定義管道(手動(dòng)/使用角度 CLI)

　　如何使用管道并傳遞額外的參數(shù)

　　什么是純管道和不純管道

　　如何通過(guò)純管道和記憶提高性能

　　那么，讓我們開(kāi)始吧！

　　在角度中創(chuàng)建自定義管道

　　要?jiǎng)?chuàng)建自定義管道，我們需要遵循3個(gè)簡(jiǎn)單的步驟：

　　1. 創(chuàng)建一個(gè)類(lèi)，并用裝飾器裝飾它。 裝飾器必須包含我們將用于調(diào)用管道的 。@Pipename

　　2. 實(shí)現(xiàn)接口。這個(gè)接口有一個(gè)我們需要實(shí)現(xiàn)的方法：方法。PipeTransform transform

　　是應(yīng)用管道的參數(shù)。稱(chēng)為“其余參數(shù)”。它被視為無(wú)限數(shù)量的可選參數(shù)(零個(gè)或多個(gè))。如果我們不需要傳遞任何額外的參數(shù)，我們只傳遞第一個(gè)參數(shù)。最后，我們返回轉(zhuǎn)換后的值。value...args

　　3. 在模塊的數(shù)組中添加自定義管道 。declaration

　　從 Angular v14 開(kāi)始，我們還可以在其模板中使用它，將管道添加到任何獨(dú)立組件的數(shù)組中。imports

　　在 Angular 中創(chuàng)建和注冊(cè)自定義管道的手動(dòng)方法到此結(jié)束。

　　使用角度氣候接口

　　如果這對(duì)你來(lái)說(shuō)似乎需要做很多工作，請(qǐng)不要擔(dān)心。我們已經(jīng)為您準(zhǔn)備好了!

　　角度 CLI 提供了一種生成拔模管道類(lèi)的快速方法。它還會(huì)在 中注冊(cè)管道。該命令為：AppModule

　　或簡(jiǎn)稱(chēng)：

　　例如，我們通過(guò)運(yùn)行以下命令創(chuàng)建了管道：mark

　　CLI 生成了以下草稿管道類(lèi)，準(zhǔn)備將我們想要的任何邏輯放入方法中。transform

　　使用管道

　　使用管道的語(yǔ)法為：

　　例如，管道接收熊貓的性別并返回引導(dǎo)圖標(biāo)類(lèi)。gender

　　獎(jiǎng)金 — 我們也可能鏈條管道。執(zhí)行順序從左到右。

　　P評(píng)估額外參數(shù)

　　傳遞額外參數(shù)的語(yǔ)法為：

　　在我們的演示中，管道接收兩個(gè)字符串值：要轉(zhuǎn)換的值和搜索詞。如果該值包含搜索詞，則該搜索詞帶有下劃線并變?yōu)榧t色。mark

　　我們還創(chuàng)建 CSS 類(lèi)來(lái)定義樣式。

　　最后，我們?cè)谀０逯惺褂霉艿馈?/p>

　　現(xiàn)在，如果我們搜索一只熊貓：

　　純管

　　默認(rèn)情況下，管道被定義為純管道。 為了清楚起見(jiàn)，我們可以像這樣顯式設(shè)置純屬性：

　　該屬性通知 Angular 該方法是純的。puretruetransform

　　如果方法始終為相同的參數(shù)返回相同的結(jié)果，并且沒(méi)有副作用(如修改參數(shù)、全局變量或除其返回值以外的任何其他內(nèi)容)，則該方法稱(chēng)為 pure。

　　Angular 知道，在這些條件下，除非輸入值更改，否則方法的結(jié)果不會(huì)更改。因此，僅當(dāng)檢測(cè)到輸入值發(fā)生更改時(shí)，它才會(huì)執(zhí)行管道。transform

　　不純管道

　　相反，通過(guò)將屬性設(shè)置為，我們聲明不純管道。 Angular 每次檢測(cè)到每次擊鍵或鼠標(biāo)移動(dòng)的變化時(shí)，都會(huì)執(zhí)行不純的管道。purefalse

　　那么為什么有人想使用不純的管道呢？

　　當(dāng)我們想要檢測(cè)復(fù)合對(duì)象中的不純變化時(shí)，通常使用不純管道。

　　將對(duì)象傳遞到管道時(shí)，Angular 僅檢查參照的更改。如果對(duì)象屬性?xún)?nèi)部發(fā)生任何更改，Angular 將無(wú)法分辨。

　　在任何情況下，使用不純的管道都要格外小心。 官方文檔指出，“長(zhǎng)時(shí)間運(yùn)行的不純管道可能會(huì)大大減慢您的應(yīng)用程序速度”。

　　提高應(yīng)用程序性能

　　注意到當(dāng)我們清除上一個(gè)GIF末尾的搜索輸入字段時(shí)的巨大滯后嗎?讓我們看看導(dǎo)致此問(wèn)題的原因，以及如何使用自定義管道解決此問(wèn)題。

　　問(wèn)題

　　問(wèn)題的原因出在模板文件中，該文件調(diào)用該方法。PandaComponent calculatePopularity

　　在組件的類(lèi)文件中，該方法使用當(dāng)前熊貓的出生年份來(lái)計(jì)算其受歡迎程度。出于演示目的，我們使用斐波那契數(shù)列和未優(yōu)化的遞歸實(shí)現(xiàn)。calculatePopularity

　　為什么在模板中調(diào)用方法會(huì)導(dǎo)致性能問(wèn)題？

　　要回答這個(gè)問(wèn)題，我們需要了解Angular的變化檢測(cè)機(jī)制的基礎(chǔ)知識(shí)。Angular 運(yùn)行更改檢測(cè)，以確定在發(fā)生更改時(shí)需要重新呈現(xiàn) UI 的哪些部分。被調(diào)用方法的結(jié)果是 UI 的一部分。

　　Angular 如何知道方法的結(jié)果是否已更改?

　　不能！只有一種方法可以知道：再次執(zhí)行它。換句話說(shuō)，它將在每次檢測(cè)到更改時(shí)運(yùn)行該方法，即使更改無(wú)關(guān)緊要。

　　這將降低應(yīng)用程序的性能。數(shù)量取決于被調(diào)用方法的作用。在我們的演示中，我們進(jìn)行了繁重、重復(fù)、未優(yōu)化的計(jì)算，因此我們之前觀察到了延遲。

　　您還可以通過(guò)加載時(shí)間判斷出問(wèn)題。我們運(yùn)行燈塔，它產(chǎn)生了以下分?jǐn)?shù)。

　　注意：燈塔報(bào)告分?jǐn)?shù)基于頁(yè)面的加載時(shí)間，而不是與之交互時(shí)。

　　首次改進(jìn)

　　作為第一步，我們將組件的策略更改為。這意味著，現(xiàn)在僅當(dāng)其屬性更改時(shí)，才會(huì)觸發(fā) 內(nèi)部的更改檢測(cè)。changeDetection OnPushPandaComponent@Input

　　這大大縮短了裝載時(shí)間。運(yùn)行燈塔證實(shí)了這一改進(jìn)。

　　這縮短了加載時(shí)間，但未縮短應(yīng)用程序的交互時(shí)間。

　　這是因?yàn)槊看挝覀冩I入內(nèi)容時(shí)，我們都在執(zhí)行搜索，這會(huì)更改對(duì) 的引用。filteredPandas

　　熊貓組件的輸入屬性也是如此。

　　因此，將再次調(diào)用其模板中的方法。calculatePopularity

　　純管道救援

　　這就是純管道發(fā)揮作用的地方。我們創(chuàng)建一個(gè)純自定義管道，僅在管道的輸入更改時(shí)才執(zhí)行所需的計(jì)算。

　　然后，我們使用管道而不是調(diào)用該方法?，F(xiàn)在，除非傳遞給管道的值發(fā)生更改，否則不會(huì)重新計(jì)算受歡迎程度。簡(jiǎn)單地說(shuō)，我們不再計(jì)算結(jié)果中仍然可見(jiàn)的大熊貓的受歡迎程度。

　　這減少了交互時(shí)間，并使應(yīng)用程序在大多數(shù)情況下順利運(yùn)行。因?yàn)榧虞d時(shí)間沒(méi)有變化，燈塔得分也沒(méi)有變化。

　　純管道和記憶

　　以前的改進(jìn)是一些東西，但是為什么應(yīng)用程序在最后仍然滯后?

　　當(dāng)我們清除搜索字段時(shí)，所有大熊貓都變得可見(jiàn)。因此，以前隱藏的熊貓現(xiàn)在被重新渲染，它們的受歡迎程度必須重新計(jì)算。

　　我們能做得更好嗎？是的，我們能！

　　如何？輸入備注！

　　管道是純的，因?yàn)殪巢瞧跏羌兒瘮?shù)。由于是這種情況，我們可以緩存計(jì)算，而不是從頭開(kāi)始重新計(jì)算它們。為此，我們通過(guò)運(yùn)行以下命令來(lái)安裝包：popularitymemo-decorator

　　npm install memo-decorator

　　然后，我們用裝飾器裝飾我們的方法。fibonacci@memo

　　這一行是否足以彌補(bǔ)差異？好吧，親眼看看！

　　該應(yīng)用程序加載速度要快得多，這也反映在燈塔分?jǐn)?shù)中。

　　此外，交互變得盡可能順利，沒(méi)有任何滯后發(fā)生。

　　如果你得到的燈塔分?jǐn)?shù)比我們低約 50 分，則可能是因?yàn)槟阍陂_(kāi)發(fā)模式下運(yùn)行應(yīng)用程序。您需要將應(yīng)用程序作為生產(chǎn)版本提供。為此，請(qǐng)執(zhí)行以下操作：

　　安裝服務(wù)器：npm install http-server -g

　　構(gòu)建應(yīng)用程序：ng build

　　服務(wù)于生產(chǎn)版本：http-server dist/ng-custom-pipe-demo

　　結(jié)論

　　在本文中，我們研究了 Angular 中的自定義管道。我們解釋了如何創(chuàng)建、使用和傳遞額外的參數(shù)。我們看到了純管道和不純管道之間的差異。最后，我們將純管道和記憶相結(jié)合，以提高應(yīng)用程序的性能。