首页  >  文章  >  web前端  >  Angular 增强的模板语法和简化的迁移

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

WBOY
WBOY原创
2024-08-22 18:46:33882浏览

Angular Enhanced Template Syntax and Streamlined Migrations

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

@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 开始,我们遇到了三个主要的迁移原理图:

  • 模板语法控制流: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中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn