Angular 和 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 提供了 NgOptimizedImage 指令。要使用它，只需導入它：

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

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

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

— 以 EfisioDev 為基礎的 A​​ngular 課程的筆記 —

以上是Angular 和 15 的改進的詳細內容。更多資訊請關注PHP中文網其他相關文章！