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 的 Angular 課程的筆記 —
免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。
Copyright© 2022 湘ICP备2022001581号-3