Angular 18.2 已经到来,虽然它可能是一个小版本,但它包含一些有价值的改进,可以增强开发人员的体验。本文深入研究了这些令人兴奋的功能,重点关注改进的 @let 语法和新迁移原理图的介绍。
@let 语法是许多 Angular 开发人员个人最喜欢的语法,在 18.2 中继续发展。它提供了两种不同的方法来定义模板变量,为您的代码带来更大的灵活性和可读性:
动态 @let: 拥抱在 @for 和 @if 指令中利用模板引用变量的能力。想象一下轻松访问模板中表单的值:
<input #myForm name="my-from" [maxlength]="maxLength" /> @let formValue = myForm.value
异步 @let: 在以前的版本中,访问从可观察对象发出的最新值需要 ngIf 指令。
@if ({ tasks: tasks$ | async }; as taskData) { //shows the @if block before the 1st tasks$ emit @for (task of taskData.tasks; track task.id) { [...] } @empty { No Tasks pending. } }
现在,用更少的线条和更高的清晰度实现相同的结果
@let tasks = tasks$ | async; @for (task of tasks; track task.id) { [...] } @empty { No Tasks pending. }
请记住,@let 变量是只读的,不能重新分配。但是,它们的值将随着每个更改检测周期自动更新。虽然在模板和类组件中使用相同的名称在技术上是可行的,但这种做法的长期影响需要进一步探索。
从 Angular 17 开始,我们遇到了三个主要的迁移原理图:
Angular 18.2 通过更多有用的工具扩展了该工具包:
Angular 18.2 可能是一个次要版本,但它为那些喜欢使用 @let 并欣赏简化的迁移过程的人提供了重大改进。正如我们热切期待 Angular 19 计划于 2024 年 11 月推出的主要功能一样,未来六周内发布的 18.3 版本有望成为另一个令人兴奋的垫脚石。所以,保持冷静,继续编码,拥抱 Angular 的进步!
以上是Angular 增强的模板语法和简化的迁移的详细内容。更多信息请关注PHP中文网其他相关文章!