Angular 增强的模板语法和简化的迁移

Angular 18.2 已经到来，虽然它可能是一个小版本，但它包含一些有价值的改进，可以增强开发人员的体验。本文深入研究了这些令人兴奋的功能，重点关注改进的 @let 语法和新迁移原理图的介绍。

@let 改进

@let 语法是许多 Angular 开发人员个人最喜欢的语法，在 18.2 中继续发展。它提供了两种不同的方法来定义模板变量，为您的代码带来更大的灵活性和可读性：

动态 @let: 拥抱在 @for 和 @if 指令中利用模板引用变量的能力。想象一下轻松访问模板中表单的值：

<input name="my-from">
@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 开始，我们遇到了三个主要的迁移原理图：

• 模板语法控制流：ng g @angular/core:control-flow
• 新的应用程序构建器：ng update @angular/cli --name use-application-builder
• 独立组件：ng g @angular/core:standalone

Angular 18.2 通过更多有用的工具扩展了该工具包：

• 独立组件路由转换：使用 ng g @angular/core:route-lazy-loading 轻松从独立组件制作延迟加载路由。
• DI 迁移： 使用 ng g @angular/core:inject-migration 简化从基于构造函数的依赖注入到新的功能性注入（）方法的转换。

结论与展望

Angular 18.2 可能是一个次要版本，但它为那些喜欢使用 @let 并欣赏简化的迁移过程的人提供了重大改进。正如我们热切期待 Angular 19 计划于 2024 年 11 月推出的主要功能一样，未来六周内发布的 18.3 版本有望成为另一个令人兴奋的垫脚石。所以，保持冷静，继续编码，拥抱 Angular 的进步！

以上是Angular 增强的模板语法和简化的迁移的详细内容。更多信息请关注PHP中文网其他相关文章！