介绍

随着 angular 18.1 的到来，该版本为编译器引入了一项令人兴奋的新功能：声明一个或多个模板变量的能力。
如何使用此功能？有哪些不同的用例？

这篇文章旨在回答。

编译器的最新功能：@let

在最新版本的 angular 中，团队在编译器中引入了新功能，该功能转化为 @-syntax。

这就是新的控制流语法的诞生

• @if
• @为
• @开关

最近，@let

作为一般规则，创建模板变量的最简单方法是使用

• 带有关键字 as 的 *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），则会引发错误