@let：Angular 1 中的新功能編譯器

介紹

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

本文旨在回答。

編譯器的最新功能：@let

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

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

• @if
• @對於
• @switch

以及最近的@let

作為一般規則，建立範本變數的最簡單方法是使用

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

或使用新的控制流語法

• @if，關鍵字為

<!-- 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的不同方式

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

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

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

<ul>
  @for(user of users(); track user.id) {
    @let isAdmin = checkIfAdmin(user);
   <li>User is admin: {{ isAdmin }}</li>
  }
</ul>

將 @let 與訊號一起使用

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

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

@let 和 javascript 表達式

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

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

<div>  
    @for (score of scores(); track $index) {
        @let total = total + score, max = calcMax(score);
        <h1>final score: {{ total }}</h1>
    }
</div>

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

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

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

以上是@let：Angular 1 中的新功能編譯器的詳細內容。更多資訊請關注PHP中文網其他相關文章！