介绍

随着 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)，则会引发错误