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

　　在本文中，我們將研究：

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

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

　　什么是純管道和不純管道

　　如何通過純管道和記憶提高性能

　　那么，讓我們開始吧！

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

　　要創(chuàng)建自定義管道，我們需要遵循3個簡單的步驟：

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

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

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

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

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

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

　　使用角度氣候接口

　　如果這對你來說似乎需要做很多工作，請不要擔心。我們已經(jīng)為您準備好了!

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

　　或簡稱：

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

　　CLI 生成了以下草稿管道類，準備將我們想要的任何邏輯放入方法中。transform

　　使用管道

　　使用管道的語法為：

　　例如，管道接收熊貓的性別并返回引導圖標類。gender

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

　　P評估額外參數(shù)

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

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

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

　　最后，我們在模板中使用管道。

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

　　純管

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

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

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

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

　　不純管道

　　相反，通過將屬性設置為，我們聲明不純管道。 Angular 每次檢測到每次擊鍵或鼠標移動的變化時，都會執(zhí)行不純的管道。purefalse

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

　　當我們想要檢測復合對象中的不純變化時，通常使用不純管道。

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

　　在任何情況下，使用不純的管道都要格外小心。 官方文檔指出，“長時間運行的不純管道可能會大大減慢您的應用程序速度”。

　　提高應用程序性能

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

　　問題

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

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

　　為什么在模板中調(diào)用方法會導致性能問題？

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

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

　　不能！只有一種方法可以知道：再次執(zhí)行它。換句話說，它將在每次檢測到更改時運行該方法，即使更改無關緊要。

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

　　您還可以通過加載時間判斷出問題。我們運行燈塔，它產(chǎn)生了以下分數(shù)。

　　注意：燈塔報告分數(shù)基于頁面的加載時間，而不是與之交互時。

　　首次改進

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

　　這大大縮短了裝載時間。運行燈塔證實了這一改進。

　　這縮短了加載時間，但未縮短應用程序的交互時間。

　　這是因為每次我們鍵入內(nèi)容時，我們都在執(zhí)行搜索，這會更改對 的引用。filteredPandas

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

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

　　純管道救援

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

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

　　這減少了交互時間，并使應用程序在大多數(shù)情況下順利運行。因為加載時間沒有變化，燈塔得分也沒有變化。

　　純管道和記憶

　　以前的改進是一些東西，但是為什么應用程序在最后仍然滯后?

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

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

　　如何？輸入備注！

　　管道是純的，因為斐波那契是純函數(shù)。由于是這種情況，我們可以緩存計算，而不是從頭開始重新計算它們。為此，我們通過運行以下命令來安裝包：popularitymemo-decorator

　　npm install memo-decorator

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

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

　　該應用程序加載速度要快得多，這也反映在燈塔分數(shù)中。

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

　　如果你得到的燈塔分數(shù)比我們低約 50 分，則可能是因為你在開發(fā)模式下運行應用程序。您需要將應用程序作為生產(chǎn)版本提供。為此，請執(zhí)行以下操作：

　　安裝服務器：npm install http-server -g

　　構建應用程序：ng build

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

　　結論

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