介绍
随着 angular 18.1 的到来，该版本为编译器引入了一项令人兴奋的新功能：声明一个或多个模板变量的能力。
如何使用此功能？有哪些不同的用例？
这篇文章旨在回答。
编译器的最新功能：@let
在最新版本的 angular 中，团队在编译器中引入了新功能，该功能转化为 @-syntax。
这就是新的控制流语法的诞生
@if@为@开关
最近，@let
作为一般规则，创建模板变量的最简单方法是使用
带有关键字 as 的 *ngif 结构指令 关键词
或使用新的控制流语法
@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），则会引发错误
以上就是@let：Angular 1 中的新功能编译器的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2673135.html
