如何在 Angular 中創(chuàng)建自定義管道，什么是純管道和不純管道，以及如何使用純管道來提高應(yīng)用程序的性能。Angular 中的管道是組件模板表達(dá)式中使用的函數(shù)，用于將值轉(zhuǎn)換為其他顯示格式。Angular 具有多個(gè)內(nèi)置管道，如日期管道、異步管道等。但是，如果這些管道不能滿足我們的需求，我們可以創(chuàng)建自己的管道。
在本文中，我們將研究：
如何在角度中創(chuàng)建自定義管道(手動/使用角度 CLI)
如何使用管道并傳遞額外的參數(shù)
什么是純管道和不純管道
如何通過純管道和記憶提高性能
那么，讓我們開始吧！
在角度中創(chuàng)建自定義管道
要創(chuàng)建自定義管道，我們需要遵循3個(gè)簡單的步驟：
1. 創(chuàng)建一個(gè)類，并用裝飾器裝飾它。 裝飾器必須包含我們將用于調(diào)用管道的 。@Pipename
2. 實(shí)現(xiàn)接口。這個(gè)接口有一個(gè)我們需要實(shí)現(xiàn)的方法：方法。PipeTransform transform
是應(yīng)用管道的參數(shù)。稱為“其余參數(shù)”。它被視為無限數(shù)量的可選參數(shù)(零個(gè)或多個(gè))。如果我們不需要傳遞任何額外的參數(shù)，我們只傳遞第一個(gè)參數(shù)。最后，我們返回轉(zhuǎn)換后的值。value...args
3. 在模塊的數(shù)組中添加自定義管道 。declaration
從 Angular v14 開始，我們還可以在其模板中使用它，將管道添加到任何獨(dú)立組件的數(shù)組中。imports
在 Angular 中創(chuàng)建和注冊自定義管道的手動方法到此結(jié)束。
使用角度氣候接口
如果這對你來說似乎需要做很多工作，請不要擔(dān)心。我們已經(jīng)為您準(zhǔn)備好了!
角度 CLI 提供了一種生成拔模管道類的快速方法。它還會在 中注冊管道。該命令為：AppModule
或簡稱：
例如，我們通過運(yùn)行以下命令創(chuàng)建了管道：mark
CLI 生成了以下草稿管道類，準(zhǔn)備將我們想要的任何邏輯放入方法中。transform
使用管道
使用管道的語法為：
例如，管道接收熊貓的性別并返回引導(dǎo)圖標(biāo)類。gender
獎金 — 我們也可能鏈條管道。執(zhí)行順序從左到右。
P評估額外參數(shù)
傳遞額外參數(shù)的語法為：
在我們的演示中，管道接收兩個(gè)字符串值：要轉(zhuǎn)換的值和搜索詞。如果該值包含搜索詞，則該搜索詞帶有下劃線并變?yōu)榧t色。mark
我們還創(chuàng)建 CSS 類來定義樣式。
最后，我們在模板中使用管道。
現(xiàn)在，如果我們搜索一只熊貓：
純管
默認(rèn)情況下，管道被定義為純管道。 為了清楚起見，我們可以像這樣顯式設(shè)置純屬性：
該屬性通知 Angular 該方法是純的。puretruetransform
如果方法始終為相同的參數(shù)返回相同的結(jié)果，并且沒有副作用(如修改參數(shù)、全局變量或除其返回值以外的任何其他內(nèi)容)，則該方法稱為 pure。
Angular 知道，在這些條件下，除非輸入值更改，否則方法的結(jié)果不會更改。因此，僅當(dāng)檢測到輸入值發(fā)生更改時(shí)，它才會執(zhí)行管道。transform
不純管道
相反，通過將屬性設(shè)置為，我們聲明不純管道。 Angular 每次檢測到每次擊鍵或鼠標(biāo)移動的變化時(shí)，都會執(zhí)行不純的管道。purefalse
那么為什么有人想使用不純的管道呢？
當(dāng)我們想要檢測復(fù)合對象中的不純變化時(shí)，通常使用不純管道。
將對象傳遞到管道時(shí)，Angular 僅檢查參照的更改。如果對象屬性內(nèi)部發(fā)生任何更改，Angular 將無法分辨。
在任何情況下，使用不純的管道都要格外小心。 官方文檔指出，“長時(shí)間運(yùn)行的不純管道可能會大大減慢您的應(yīng)用程序速度”。
提高應(yīng)用程序性能
注意到當(dāng)我們清除上一個(gè)GIF末尾的搜索輸入字段時(shí)的巨大滯后嗎?讓我們看看導(dǎo)致此問題的原因，以及如何使用自定義管道解決此問題。
問題
問題的原因出在模板文件中，該文件調(diào)用該方法。PandaComponent calculatePopularity
在組件的類文件中，該方法使用當(dāng)前熊貓的出生年份來計(jì)算其受歡迎程度。出于演示目的，我們使用斐波那契數(shù)列和未優(yōu)化的遞歸實(shí)現(xiàn)。calculatePopularity
為什么在模板中調(diào)用方法會導(dǎo)致性能問題？
要回答這個(gè)問題，我們需要了解Angular的變化檢測機(jī)制的基礎(chǔ)知識。Angular 運(yùn)行更改檢測，以確定在發(fā)生更改時(shí)需要重新呈現(xiàn) UI 的哪些部分。被調(diào)用方法的結(jié)果是 UI 的一部分。
Angular 如何知道方法的結(jié)果是否已更改?
不能！只有一種方法可以知道：再次執(zhí)行它。換句話說，它將在每次檢測到更改時(shí)運(yùn)行該方法，即使更改無關(guān)緊要。
這將降低應(yīng)用程序的性能。數(shù)量取決于被調(diào)用方法的作用。在我們的演示中，我們進(jìn)行了繁重、重復(fù)、未優(yōu)化的計(jì)算，因此我們之前觀察到了延遲。
您還可以通過加載時(shí)間判斷出問題。我們運(yùn)行燈塔，它產(chǎn)生了以下分?jǐn)?shù)。
注意：燈塔報(bào)告分?jǐn)?shù)基于頁面的加載時(shí)間，而不是與之交互時(shí)。
首次改進(jìn)
作為第一步，我們將組件的策略更改為。這意味著，現(xiàn)在僅當(dāng)其屬性更改時(shí)，才會觸發(fā) 內(nèi)部的更改檢測。changeDetection OnPushPandaComponent@Input
這大大縮短了裝載時(shí)間。運(yùn)行燈塔證實(shí)了這一改進(jìn)。
這縮短了加載時(shí)間，但未縮短應(yīng)用程序的交互時(shí)間。
這是因?yàn)槊看挝覀冩I入內(nèi)容時(shí)，我們都在執(zhí)行搜索，這會更改對 的引用。filteredPandas
熊貓組件的輸入屬性也是如此。
因此，將再次調(diào)用其模板中的方法。calculatePopularity
純管道救援
這就是純管道發(fā)揮作用的地方。我們創(chuàng)建一個(gè)純自定義管道，僅在管道的輸入更改時(shí)才執(zhí)行所需的計(jì)算。
然后，我們使用管道而不是調(diào)用該方法?，F(xiàn)在，除非傳遞給管道的值發(fā)生更改，否則不會重新計(jì)算受歡迎程度。簡單地說，我們不再計(jì)算結(jié)果中仍然可見的大熊貓的受歡迎程度。
這減少了交互時(shí)間，并使應(yīng)用程序在大多數(shù)情況下順利運(yùn)行。因?yàn)榧虞d時(shí)間沒有變化，燈塔得分也沒有變化。
純管道和記憶
以前的改進(jìn)是一些東西，但是為什么應(yīng)用程序在最后仍然滯后?
當(dāng)我們清除搜索字段時(shí)，所有大熊貓都變得可見。因此，以前隱藏的熊貓現(xiàn)在被重新渲染，它們的受歡迎程度必須重新計(jì)算。
我們能做得更好嗎？是的，我們能！
如何？輸入備注！
管道是純的，因?yàn)殪巢瞧跏羌兒瘮?shù)。由于是這種情況，我們可以緩存計(jì)算，而不是從頭開始重新計(jì)算它們。為此，我們通過運(yùn)行以下命令來安裝包：popularitymemo-decorator
npm install memo-decorator
然后，我們用裝飾器裝飾我們的方法。fibonacci@memo
這一行是否足以彌補(bǔ)差異？好吧，親眼看看！
該應(yīng)用程序加載速度要快得多，這也反映在燈塔分?jǐn)?shù)中。
此外，交互變得盡可能順利，沒有任何滯后發(fā)生。
如果你得到的燈塔分?jǐn)?shù)比我們低約 50 分，則可能是因?yàn)槟阍陂_發(fā)模式下運(yùn)行應(yīng)用程序。您需要將應(yīng)用程序作為生產(chǎn)版本提供。為此，請執(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)用程序的性能。
京公網(wǎng)安備 11010802030320號