隨著 Angular 18.1 的到來，該版本為編譯器引入了一項令人興奮的新功能：聲明一個或多個模板變數的能力。
如何使用此功能？有哪些不同的用例？
本文旨在回答。
在最新版本的 Angular 中，團隊在編譯器中引入了新功能，並且此功能轉換為 @-syntax。
這就是新的控制流語法的誕生
以及最近的@let
作為一般規則，建立範本變數的最簡單方法是使用
或使用新的控制流語法
<!-- older control flow syntax -->
<div *ngIf="user$ |async as user">
{{ user.name }}
</div>
<!-- new control flow syntax -->
@if(user$ |async; as user){
<div>{{ user.name }}</div>
}
這個方便的功能允許我們將非同步管道的結果儲存在變數中，以便稍後在模板中使用。
但是，這種語法引發了一些問題。在這裡，條件檢查非同步管道的傳回是否為 true，從而檢查傳回值是否與 javascript 中被視為 false 的任何值不同。
如果傳回的是物件或數組，則這個條件會非常有效。
但是如果回傳的是數字，特別是數字 0
@if(((numbers$ |async) !=== undefined || (numbers$ |async) !=== null) ; as myNumber){
<div>{{ myNumber }}</div>
}
這就是 @let 發揮作用的地方。
@let 不檢查條件，它只是允許您以簡單的方式聲明本地模板變數
所以上面的程式碼範例寫起來變得更簡單和優雅
@let myNumber = (numbers$ | async) ?? 0;
<div>{{ myNumber }}</div>
這樣 myNumber 變數就會永遠顯示。
變數宣告最經典的場景之一就是儲存複雜表達式的結果。
在條件下使用函數總是不可取的。在某種條件下使用函數會對效能產生影響，因為滑鼠最輕微的移動或模板的變更都會重新評估該函數。
@let，如上所述，不求值，而只是宣告一個局部變數。只有當該變數的依賴項之一發生變更時，才會重新計算該變數。所以對於複雜表達式這樣的表達式來說，呼叫函數並不是一個壞主意。
<ul>
@for(user of users(); track user.id) {
@let isAdmin = checkIfAdmin(user);
<li>User is admin: {{ isAdmin }}</li>
}
</ul>
@let 與訊號相容，使用方式如下
@let userColor = user().preferences?.colors?.primaryColor || 'white';
<span>user favorite color is {{ userColor }}</span>
如您所見，@let 可用於計算任何類型的 javascript 表達式，除了類別的實例化
透過這種方式，可以解釋算術運算符，並且可以在幾行或僅一行上聲明多個變數。
<div>
@for (score of scores(); track $index) {
@let total = total + score, max = calcMax(score);
<h1>final score: {{ total }}</h1>
}
</div>
如上所述，@let 的行為與 javascript 中 let 的行為非常相似，它有以下好處
以上是@let：Angular 1 中的新功能編譯器的詳細內容。更多資訊請關注PHP中文網其他相關文章！
