Angular 增強的模板語法和簡化的遷移

Angular 18.2 已經到來，雖然它可能是一個小版本，但它包含一些有價值的改進，可以增強開發人員的體驗。本文深入研究了這些令人興奮的功能，重點關注改進的 @let 語法和新遷移原理圖的介紹。

@let 改進

@let 語法是許多 Angular 開發人員個人最喜歡的語法，在 18.2 中繼續發展。它提供了兩種不同的方法來定義模板變量，為您的程式碼帶來更大的靈活性和可讀性：

動態 @let: 擁抱在 @for 和 @if 指令中利用範本引用變數的能力。想像一下輕鬆存取範本中表單的值：

<input name="my-from">
@let formValue = myForm.value

非同步 @let: 在先前的版本中，存取從可觀察物件發出的最新值需要 ngIf 指令。

@if ({ tasks:  tasks$ | async }; as taskData) {

//shows the @if block before the 1st tasks$ emit
 @for (task of taskData.tasks; track task.id) {
    [...]
  } @empty {
    No Tasks pending.
  }
}

現在，用更少的線條和更高的清晰度實現相同的結果

@let tasks = tasks$ | async;
@for (task of tasks; track task.id) {
  [...]
}
@empty {
  No Tasks pending.
}

請記住，@let 變數是唯讀的，不能重新分配。但是，它們的值將隨著每個更改檢測週期自動更新。雖然在模板和類別元件中使用相同的名稱在技術上是可行的，但這種做法的長期影響需要進一步探索。

遷移變得容易：城鎮中的新示意圖

從 Angular 17 開始，我們遇到了三個主要的遷移原理圖：

• 模板語法控制流：ng g @angular/core:control-flow
• 新的應用程式建構器：ng update @angular/cli --name use-application-builder
• 獨立組件：ng g @angular/core:standalone

Angular 18.2 透過更多有用的工具擴充了此工具包：

• 獨立元件路由轉換：使用 ng g @angular/core:route-lazy-loading 輕鬆從獨立元件製作延遲載入路由。
• DI 遷移： 使用 ng g @angular/core:inject-migration 簡化從基於建構函式的依賴注入到新的功能性注入（）方法的轉換。

結論與展望

Angular 18.2 可能是次要版本，但它為那些喜歡使用 @let 並欣賞簡化的遷移過程的人提供了重大改進。正如我們熱切期待 Angular 19 計劃於 2024 年 11 月推出的主要功能一樣，未來六週內發布的 18.3 版本有望成為另一個令人興奮的墊腳石。所以，保持冷靜，繼續編碼，擁抱 Angular 的進步！

以上是Angular 增強的模板語法和簡化的遷移的詳細內容。更多資訊請關注PHP中文網其他相關文章！