」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 透過創建自訂管道來提高 Angular 的性能

透過創建自訂管道來提高 Angular 的性能

發佈於2024-11-04
瀏覽:730

我們不應該在 HTML 中使用方法,除非它們與事件相關聯:

Improve performance in Angular by creating your CUSTOM PIPES

這裡存在著被執行多次的問題。在範例中,正在對應一個數組,這將執行 16 次。同樣,我們不應該直接使用 get 或 API 請求。

這可以使用管道和/或建立自訂管道來解決,該管道只會為每個使用者執行一次。在此範例中,管道具有轉換方法,該方法接收與先前使用的方法相同的參數:

Improve performance in Angular by creating your CUSTOM PIPES

Improve performance in Angular by creating your CUSTOM PIPES

解釋:

方法的問題是因為它們不是 Angular 原生的,所以 Angular 不知道它們的值何時發生了變化。因此,它會在每次小更新後不斷評估更改方法。

相較之下,管道是本機的、純粹的,並且僅在其參數變更時才執行。此外,管道可以在應用程式的不同部分中重複使用(與方法不同,方法只能透過將其發送到服務來重複使用)。

如果管道不存在,我們可以透過指定其目標位置來建立管道:

ng g p Pipes/fullName(其中 Pipes/fullName 是位置)。

管道被創建為實現 PipeTransform 的類,該介面要求我們有一個轉換方法。該方法在管道運行時執行,並且像普通方法一樣工作。要使用已建立的管道,我們必須將其匯入應用程式元件(獨立):

Improve performance in Angular by creating your CUSTOM PIPES

在 HTML 中使用它時,我們透過管道名稱欄位中指示的名稱來呼叫它,使用「|」符號後跟管道名稱。第一個參數傳遞到左側,如果我們想傳遞其他參數,則將它們傳遞到右側,在冒號「:」之後:

Improve performance in Angular by creating your CUSTOM PIPES

Improve performance in Angular by creating your CUSTOM PIPES

記住好的做法:如果有很多參數,最好使用物件。作為一個好的做法,盡量不要過度使用管道以避免混亂。分解程式碼,你就會成功。

為了建立管道的內容,我們在轉換方法中指定要接收的參數和回傳類型。然後我們寫入內容並傳回結果。可以透過在其前面加上“?”前綴來接收可選值,並且可以使用“=”來指派預設值。

— 基於 EfisioDev 的 Angular 課程的筆記 —

版本聲明 本文轉載於:https://dev.to/samirabawad/improve-performance-in-angular-by-creating-your-custom-pipes-3gaj?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>
  • 如何在 PHP 中選擇正確的使用者瀏覽器偵測方法?
    如何在 PHP 中選擇正確的使用者瀏覽器偵測方法?
    使用PHP 進行可靠的用戶瀏覽器檢測確定最佳方法當涉及到PHP 中的用戶瀏覽器檢測時,選擇使用$_SERVER ['HTTP_USER_AGENT'] 和get_browser 函數出現。每種方法都有其優點和缺點。 $_SERVER['HTTP_USER_AGENT'...
    程式設計 發佈於2024-11-17
  • 在 Go 中使用 WebSocket 進行即時通信
    在 Go 中使用 WebSocket 進行即時通信
    构建需要实时更新的应用程序(例如聊天应用程序、实时通知或协作工具)需要一种比传统 HTTP 更快、更具交互性的通信方法。这就是 WebSockets 发挥作用的地方!今天,我们将探讨如何在 Go 中使用 WebSocket,以便您可以向应用程序添加实时功能。 在这篇文章中,我们将介绍: WebSoc...
    程式設計 發佈於2024-11-17
  • 如何在 PHP 中反序列化 jQuery 序列化表單?
    如何在 PHP 中反序列化 jQuery 序列化表單?
    在PHP 中反序列化jQuery 序列化表單利用jQuery 的$('#form').serialize() 方法提交表單資料時到一個PHP頁面,問題就出現了:我們如何在PHP中反序列化它? PHP jQuery序列化表單的反序列化PHP的parse_str()函數提供了有效的解決方...
    程式設計 發佈於2024-11-17
  • 如何在不使用代理程式的情況下追蹤 JAX-WS 中的 XML 請求和回應?
    如何在不使用代理程式的情況下追蹤 JAX-WS 中的 XML 請求和回應?
    在沒有代理的情況下跟踪JAX-WS 中的XML 請求/響應利用JAX-WS 參考實現,可以訪問原始請求/無需使用代理即可回應Web 服務的XML。這可以透過設定啟用日誌記錄通訊的系統屬性來實現。以下是完成此動作的程式碼:System.setProperty("com.sun.xml.ws....
    程式設計 發佈於2024-11-17
  • 大批
    大批
    方法是可以在物件上呼叫的 fns 數組是對象,因此它們在 JS 中也有方法。 slice(begin):將陣列的一部分提取到新數組中,而不改變原始數組。 let arr = ['a','b','c','d','e']; // Usecase: Extract till index ...
    程式設計 發佈於2024-11-17
  • Bootstrap 4 Beta 中的列偏移發生了什麼事?
    Bootstrap 4 Beta 中的列偏移發生了什麼事?
    Bootstrap 4 Beta:列偏移的刪除和恢復Bootstrap 4 在其Beta 1 版本中引入了重大更改柱子偏移了。然而,隨著 Beta 2 的後續發布,這些變化已經逆轉。 從 offset-md-* 到 ml-auto在 Bootstrap 4 Beta 1 中, offset-md-*...
    程式設計 發佈於2024-11-17
  • 如何在 PHP 中組合兩個關聯數組,同時保留唯一 ID 並處理重複名稱?
    如何在 PHP 中組合兩個關聯數組,同時保留唯一 ID 並處理重複名稱?
    在 PHP 中組合關聯數組在 PHP 中,將兩個關聯數組組合成一個數組是常見任務。考慮以下請求:問題描述:提供的代碼定義了兩個關聯數組,$array1 和 $array2。目標是建立一個新陣列 $array3,它合併兩個陣列中的所有鍵值對。 此外,提供的陣列具有唯一的 ID,而名稱可能重疊。要求是建...
    程式設計 發佈於2024-11-17
  • 正規表示式夠了嗎?驗證電子郵件地址的全面指南
    正規表示式夠了嗎?驗證電子郵件地址的全面指南
    確保電子郵件地址的有效性:綜合指南驗證電子郵件地址的有效性是資料驗證的一個重要面向。 Regex(正規表示式)提供了一個強大的工具,可確保使用者輸入符合特定的電子郵件格式。然而,子網域電子郵件地址的存在經常在驗證過程中帶來挑戰。 基於正規表示式的驗證的局限性雖然正則表達式對於檢查基本資訊很有用電子郵...
    程式設計 發佈於2024-11-17
  • 如何使用 PHP 和 MySQL 查詢結果來擷取父節點下的所有子節點、孫節點和後代節點?
    如何使用 PHP 和 MySQL 查詢結果來擷取父節點下的所有子節點、孫節點和後代節點?
    使用PHP 和MySQL 查詢父級下的所有子節點、孫節點等節點原始問題: 檢索與父節點關聯的所有子節點、孫節點和後續後代節點是使用分層資料結構時的常見任務。這個問題出現在資料庫表採用鄰接表模型進行資料組織的場景。 使用遞迴的方法:為了解決這個問題,遞迴被證明是一種有效的方法。以下是如何使用遞歸來實現...
    程式設計 發佈於2024-11-17
  • 如何解決在 MySQL 中將 @GenerateValue GenerationType.TABLE 與多態抽象超類別一起使用時出現「'where 子句'中的未知列 'sequence_name'」錯誤?
    如何解決在 MySQL 中將 @GenerateValue GenerationType.TABLE 與多態抽象超類別一起使用時出現「'where 子句'中的未知列 'sequence_name'」錯誤?
    @GeneratedValue MySQL 上的多態抽象超類別@GeneratedValue MySQL 上的多態抽象超類別在使用Hibernate 和MySQL 的Spring MVC 應用程式中,我們發現嘗試持久化抽象化抽象BaseEntity 的超類BaseEntity子類,遇到「表'...
    程式設計 發佈於2024-11-17
  • 資料庫連線:始終開啟還是僅在需要時開啟?
    資料庫連線:始終開啟還是僅在需要時開啟?
    資料庫連線管理:始終開啟還是根據需要開啟? 管理資料庫連接對於高效且可擴展的應用程式設計至關重要。問題出現了:資料庫連線應該持續保持開啟還是僅在必要時才建立? 按需打開和關閉連接傳統方法是在以下情況下打開連接:需要並隨後關閉它。這確保了在不使用連線時不會浪費資源來保持連線開啟。但是,由於建立和斷開連...
    程式設計 發佈於2024-11-17
  • document.getElementById 和 jQuery $() 有什麼差別?
    document.getElementById 和 jQuery $() 有什麼差別?
    document.getElementById 和jQuery $() 之間的區別提供的程式碼片段使用兩種不同的方法來擷取具有ID的元素“內容”。然而,這些方法之間存在細微的差別。 document.getElementById此方法傳回一個 DOM(文件物件模型) 元素,這是 HTML 元素的本機...
    程式設計 發佈於2024-11-17
  • 如何使用 Sigaction 函式在 C++ 中優雅地處理 Ctrl-C 中斷?
    如何使用 Sigaction 函式在 C++ 中優雅地處理 Ctrl-C 中斷?
    Intercepting Ctrl-C Events in C 捕捉Ctrl-C 事件是編程中的必要任務,尤其是在您希望對意外中斷做出優雅回應的情況下。 使用 Sigaction在 C 中,使用 sigaction 函數來處理訊號更可靠。其文法如下:int sigaction(int signum,...
    程式設計 發佈於2024-11-17
  • 為什麼 Go 的型別切換不允許 Fallthrough?
    為什麼 Go 的型別切換不允許 Fallthrough?
    類型切換的失敗:深入解釋Go 中的類型切換允許根據具體類型有效地處理值。然而,與標準 switch-case 語句不同的是,在類型 switch 中明確不允許fallthrough。這種設計選擇引發了對其基本原則的質疑。 理解原因Go 規範規定型開關中不允許「fallthrough」。這種禁止源自於...
    程式設計 發佈於2024-11-17
  • 如何在 Go 中存取 HTML 模板中的嵌套結構欄位?
    如何在 Go 中存取 HTML 模板中的嵌套結構欄位?
    如何在Go 中存取HTML 模板中的映射元素的結構字段本文解決了使用html/ 從HTML 模板中的映射元素檢索結構字段的問題Go 中的模板包。 考慮以下 Task 結構體:type Task struct { Cmd string Args []string Desc strin...
    程式設計 發佈於2024-11-17

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3