介紹

隨著 Angular 18.1 的到來，該版本為編譯器引入了一項令人興奮的新功能：聲明一個或多個模板變數的能力。
如何使用此功能？有哪些不同的用例？

本文旨在解答。

編譯器的最新功能：@let

在最新版本的 Angular 中，團隊在編譯器中引入了新功能，該功能轉換為 @-syntax。

這就是新的控制流程語法的誕生

• @如果
• @為了
• @轉變

以及最近的@let

作為一般規則，創建模板變數的最簡單方法是使用

• *ngIf 結構指令，關鍵字為 as 關鍵字

或使用新的控制流語法

• @if 關鍵字為

  {{ user.name }}



@if(user$ |async; as user){
  
{{ user.name }}
}

這個方便的功能允許我們將非同步管道的結果儲存在變數中，以便稍後在模板中使用。

但是，這種語法引發了一些問題。這裡，條件檢查非同步管道的傳回是否為 true，從而檢查傳回值是否與 javascript 中被視為 false 的任何值不同。

如果傳回的是物件或數組，則此條件將非常有效。

但如果回傳的是數字，特別是數字 0

@if(((numbers$ |async) !=== undefined || (numbers$ |async) !=== null) ; as myNumber){
  
{{ myNumber }}
}

這就是 @let 發揮作用的地方。

@let 不檢查條件，它只是允許您以簡單的方式聲明本地模板變數

所以上面的程式碼範例寫起來變得更簡單和優雅

@let myNumber = (numbers$ | async) ?? 0;
{{ myNumber }}

這樣 myNumber 變數將永遠顯示。

使用@let的不同方式

變數宣告最經典的場景之一就是儲存複雜表達式的結果。

在條件中使用函數總是不可取的。在某種條件下使用函數會對效能產生影響，因為滑鼠最輕微的移動或模板的變更都會重新評估該函數。

@let，如上所述，不求值，而只是宣告一個局部變數。只有當該變數的依賴項之一發生變更時，才會重新計算該變數。因此，對於複雜表達式等表達式來說，呼叫函數並不是一個壞主意。

@for(user of users(); track user.id) { @let isAdmin = checkIfAdmin(user);
• User is admin: {{ isAdmin }}
}

將 @let 與訊號一起使用

@let與訊號相容，使用方式如下

@let userColor = user().preferences?.colors?.primaryColor || 'white';
user favorite color is {{ userColor }}

@let 和 javascript 表達式

如您所見，@let 可用於計算任何類型的 javascript 表達式，除了類別的實例化之外

透過這種方式，可以解釋算術運算符，並且可以在幾行或僅一行上聲明多個變數。

  
    @for (score of scores(); track $index) {
        @let total = total   score, max = calcMax(score);
        
final score: {{ total }}
    }

@let 帶來的其他很酷的東西

如上所述，@let的行為與javascript中let的行為非常相似，它有以下好處

• 作用域的作用類似 javascript 中的 let 作用域
• 範本中較好的打字幹擾
• 如果在宣告之前使用變數 (let)，則會引發錯誤