」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > Angular 和 15 的改進

Angular 和 15 的改進

發佈於2024-11-08
瀏覽:528

Improvements in Angular and 15

1) 在沒有建構子的情況下在 Angular 14 中使用注入註入服務。
以前,注入任何服務總是需要具有建構函數的類別:

class MyClass {
  constructor(private myService: MyService) {}
}

現在,我們可以在函數和類別中註入服務。我們只需要宣告一個變數並將其設定為等於注入服務名稱:

const myService = 注入(MyService);
這很有用,例如,在攔截器和防護中,它們現在通常使用函數而不是類別來完成。

2) 在 Angular 15 中用於保存行的自關閉標籤。
從這個版本開始,您可以使用帶有單一標籤的元件:

之前,需要打開和關閉組件標籤才能使用它:

我的組件>

3) 透過建立捷徑減少 Angular 中的導入。
而不是像這樣長時間導入:

從 '../../components/my-component' 導入 { MyComponent };
您可以像這樣縮短導入:

從 '@components/my-component' 導入 { MyComponent };
若要實現此目的,請前往 tsconfig.json 檔案並在 compilerOptions 屬性下新增路徑。在路徑內部,您可以設定自己的匯入捷徑:

{
  "compilerOptions": {
    "paths": {
      "@components/*": ["src/app/components/*"]
    }
  }
}

建議是,如果您在某個元件內並且想要使用該元件特定的內容,請使用 ./ 相對匯入它以存取該資源。但訪問父資料夾時,請使用@捷徑。如果出現問題,您可能需要關閉並重新開啟 Visual Studio Code。這些小細節對於保持程式碼盡可能有條理非常重要。

4) 使用 Angular 15 中的 NgOptimizedImage 指令優化圖片載入。
如果我們有一個包含 15 個圖像的列表,並通常使用 [src] 迭代它們,我們將面臨應用程式啟動時一次加載所有 15 個圖像的問題,這會降低效能:

Angular 和 15 的改進
為了解決這個問題,Angular 提供了 NgOptimizedImage 指令。要使用它,只需導入它:

從'@angular/common'導入{NgOptimizedImage};
並使用 [ngSrc] 而不是 [src]。這將延遲加載圖像,從而提高效能。然而,該指令還有許多其他配置。如果您只想延遲加載,我建議使用loading =“lazy”屬性,該屬性是HTML標準的一部分,並且與所有瀏覽器相容:

Angular 和 15 的改進

建議:如果選單頂部有主圖像,請勿將其設定為延遲加載,因為它將在應用程式開啟時第一個加載。僅將此應用於可能出現在滾動下方的圖像,因為我們不需要立即加載它們。

這對於公共應用程式非常重要,例如需要良好 SEO 的 SSR 應用程序,因為它有助於提高效能。

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

版本聲明 本文轉載於:https://dev.to/samirabawad/improvements-in-angular-14-and-15-1f04?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>
  • 每個 PHP 專家都該回答的問題
    每個 PHP 專家都該回答的問題
    自 1990 年代中期以來,PHP 一直是 Web 開發的重要語言,廣泛應用於網站後端。儘管出現了新的語言和框架,PHP 仍然很重要,尤其是在 WordPress 等平台上。如果您能解決以下八個主題,那麼您對PHP 的理解就相當高級了。 1. 建構開發環境 部署 PHP 開發環境...
    程式設計 發佈於2024-11-08
  • JavaScript 能否為不可預測的屬性實現動態 Getter 和 Setter?
    JavaScript 能否為不可預測的屬性實現動態 Getter 和 Setter?
    JavaScript 可以實作動態 Getters/Setters 嗎? 動態 getters 和 setters 允許 JavaScript 物件處理超出預先定義屬性的屬性存取和修改。雖然早期的 JavaScript 技術對已知屬性使用特定的 getter 和 setter,但本文探討了為任何未定...
    程式設計 發佈於2024-11-08
  • 我的第一個使用 Python 建立的開源項目,透過 CLI 快速檢查資料庫
    我的第一個使用 Python 建立的開源項目,透過 CLI 快速檢查資料庫
    我的問題是: 在處理其他項目時,我發現自己總是必須連接並使用 SELECT * 來查看虛擬條目或新用戶。我更喜歡使用 CLI 來監視我的資料庫條目,特別是因為我正在測試並只是將虛擬使用者新增為專案中的第一個普通使用者。因此,總是需要連接到 postgres、mysql 並從 CLI 進行 selec...
    程式設計 發佈於2024-11-08
  • PHP,永不倒下的大象!
    PHP,永不倒下的大象!
    照片由 Ben Griffiths 在 Unsplash 上拍攝 PHP是一種廣受好評的語言,同時也受到其他人的批評,有人說它正在消亡,但真的是這樣嗎,值得花時間學習PHP嗎? PHP PHP 是 Rasmus Lerdorf 在 90 年代開發的程式語言,最初它被開發為一種伺服器...
    程式設計 發佈於2024-11-08
  • 如何從 Android 應用程式安全地存取遠端 MySQL 資料庫?
    如何從 Android 應用程式安全地存取遠端 MySQL 資料庫?
    使用JDBC 在Android 中存取遠端MySQL 資料庫:綜合分析使用JDBC API 從Android 應用程式遠端連線到MySQL 資料庫是一種常見的操作移動開發者之間的問題。雖然建立直接連接在技術上是可行的,但它帶來了重大的安全和效能問題。 安全影響允許 Android 應用程式直接連接到...
    程式設計 發佈於2024-11-08
  • 使用 CSS 建立自訂滑鼠遊標
    使用 CSS 建立自訂滑鼠遊標
    Written by Samson Omojola✏️ Editor’s note: This article was last updated by Njong Emy on 5 August 2024 to update content and code blocks, as well as t...
    程式設計 發佈於2024-11-08
  • 如何修復 Chrome 擴充功能中孤立內容腳本導致的「擴充功能上下文無效」錯誤?
    如何修復 Chrome 擴充功能中孤立內容腳本導致的「擴充功能上下文無效」錯誤?
    如何在Chrome 擴充程式更新後刪除孤立腳本問題無意中重新載入Chrome 擴充程序,尤其是處於開發者模式的擴充程序,可能會建立孤立內容腳本。這些腳本仍然在後台運行,但與擴展的其餘部分失去了通信,從而導致諸如“擴展上下文無效”和“未檢查的運行時.lastError”之類的錯誤。 解決方案孤立的內容...
    程式設計 發佈於2024-11-08
  • 為什麼需要設定$GOPATH以及如何有效使用它?
    為什麼需要設定$GOPATH以及如何有效使用它?
    在$GOPATH 的迷宮中導航作為一個初露頭角的Go 開發者,在錯綜複雜的$GOPATH 中導航可能會令人畏懼。為了闡明其目的和用法,讓我們深入研究有關此環境變數的一些常見問題。 為什麼在專案根目錄設定 $GOPATH? 傳統上, $GOPATH 對於設置安裝 Go 包的工作區至關重要。預設情況下,...
    程式設計 發佈於2024-11-08
  • 如何建立資料輸入系統(快速簡單指南)
    如何建立資料輸入系統(快速簡單指南)
    三步构建数据输入系统 在本指南中,我们详细介绍了使用 Five 的快速应用程序开发环境构建和部署数据输入系统所需的步骤。 什么是数据输入系统? 数据输入系统是一个旨在捕获、存储、管理和分析数据的平台。这些系统有助于收集用于决策、研究、分析和报告的重要信息。数据输入系统范围从基本的在线表格到与数据库和...
    程式設計 發佈於2024-11-08
  • 使用內嵌 SVG 時如何確保剪輯路徑的響應式對齊?
    使用內嵌 SVG 時如何確保剪輯路徑的響應式對齊?
    具有內嵌 SVG 的響應式剪輯路徑將剪輯路徑應用於具有背景的元素時,通常會嵌入 SVG 內嵌。但是,您可能會遇到回應能力或對齊問題,如下例所示:<header id="block-header"> <svg width="100%" he...
    程式設計 發佈於2024-11-08
  • 使用 PHP 安全地傳送電子郵件:使用 SMTP 發送無垃圾郵件的指南
    使用 PHP 安全地傳送電子郵件:使用 SMTP 發送無垃圾郵件的指南
    这是如何使用 PHP SMTP 发送电子邮件而不进入垃圾邮件文件夹的分步示例。 我们将使用 PHPMailer 库,它简化了通过 SMTP 发送电子邮件的过程,并有助于提高送达率。按照以下步骤,您将了解如何正确配置 SMTP 以避免电子邮件进入垃圾邮件文件夹。 第1步:安装PHPMa...
    程式設計 發佈於2024-11-08
  • 如何使用 Python 的「locale」模組來格式化貨幣值?
    如何使用 Python 的「locale」模組來格式化貨幣值?
    Python 中的貨幣格式:綜合指南將數位格式化為貨幣是程式設計中的常見任務,尤其是在處理財務數據時。在 Python 中,locale 模組提供了方便的函數來格式化貨幣值。 如何使用Python 的locale 模組格式化貨幣值匯入locale module:import locale設定loca...
    程式設計 發佈於2024-11-08
  • 您可能不知道的關於類型轉換的有趣事實
    您可能不知道的關於類型轉換的有趣事實
    介紹 型別轉換不僅僅是技術上的需要;它有著豐富的歷史和許多程式設計師可能不知道的迷人的細微差別。了解這些可以為程式設計和軟體開發提供更深入的見解。 類型轉換的歷史視角 多年來,類型轉換的概念已經發生了顯著的演變。 程式語言中型別轉換的演進: 在程式設計的早期,型...
    程式設計 發佈於2024-11-08
  • 將資料提取到 CSV 檔案時,為什麼我的 PDO 準備語句會傳回雙結果?
    將資料提取到 CSV 檔案時,為什麼我的 PDO 準備語句會傳回雙結果?
    PDO 準備語句取得雙重結果使用者遇到了一個問題,即在將資料輸出到CSV 檔案。相關程式碼利用 $result_get_rows->fetch() 函數從資料庫中檢索行。 理解 Fetch() 方法The fetch() PDOStatement 物件的方法用於從結果集中檢索行。預設情況下,它以索引...
    程式設計 發佈於2024-11-08
  • 鴨子類型遇到類型提示:在 Python 中使用協議
    鴨子類型遇到類型提示:在 Python 中使用協議
    Python 的动态特性和对鸭子类型的支持长期以来因其灵活性而受到称赞。然而,随着代码库变得越来越大、越来越复杂,静态类型检查的好处变得越来越明显。但是我们如何协调鸭子类型的灵活性和静态类型检查的安全性呢?进入Python的Protocol类。 在本教程中,您将学习: 什么是鸭子类型以及 Pytho...
    程式設計 發佈於2024-11-08

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

Copyright© 2022 湘ICP备2022001581号-3