Angular 14 - 类型化的表单和独立组件

热门技术勘探工
390 阅读7分钟

InfoQ首页 新闻 Angular 14 - 类型化表单和独立组件

网络开发

网络服务器和反向代理缓存101（2022年6月16日现场网络研讨会） - 保存您的座位

Angular 14 - 类型化的表单和独立组件

喜欢 打印书签

Jun 07, 2022 1 min read

作者

为InfoQ撰稿

加入一个专家社区。 提高你的知名度。
发展你的事业。了解更多

Angular 14在本月初发布，是自Ivy以来最重要的一次更新。它包括两个期待已久的功能：类型化的反应式表单和独立组件，以及一些小的改进。

严格的类型化反应式表单是一个长期存在的社区要求，可以追溯到Angular 2的发布。

在Angular 14之前，Reactive Forms的许多类中都不包含类型定义，TypeScript在编译过程中不会捕捉到像下面这个例子中的错误。

const login = new FormGroup({
  email: new FormControl(''),
  password: new FormControl(''),
});

console.log(login.value.notanemail);

在Angular 14中，FormGroup、formControl和相关的类包含了类型定义，使TypeScript能够捕捉到许多常见的错误。

迁移到新的类型化反应式表单并不是自动的。

现有的表单控制器、组等，在升级过程中会以Untyped为前缀，它保留了以前Angular版本的准确类型定义。

为了利用新的Typed Reactive Forms，开发人员将需要手动删除Untyped前缀，并修复可能出现的任何错误。

开发人员可以在类型化的反应式表单文档中找到更多细节。

Angular 14的第二个主要变化是独立组件的概念。

Angular模块长期以来一直是一个有争议的话题，许多社区成员声称它导致了Angular应用程序中不必要的复杂化。

在Angular 14中，现在可以通过简单地在Component装饰器中传递standalone: true属性来创建独立的组件。

@Component({
  selector: 'sample-component',
  standalone: true,
  template: ``,
  imports: [ ComponentOne, ComponentTwo, SampleDirective,
             SampleService, CommonModule]
  ],
})
export class SampleComponent {
    ...
}

由于仍然需要Angular的依赖注入，许多模块的定义被移到了Component装饰器中。

目前还不清楚社区将如何采用这项新功能，Angular团队已经将这项功能标记为开发者预览版，它可能在未来的版本中改变API。

这个版本还包括一个新的扩展的Diagnostics框架，它提供了关于模板错误和最佳实践的改进反馈。

目前，该框架包括两个新的警告，一个是针对盒子里的逆向香蕉（[]）语法（这是有效的，但很少是有意的），另一个是当输入不为空时不必要的空值凝聚（？

最后，Angular 14使用最新的TypeScript 4.7，并默认以ES2020为目标。

欲了解完整的变化列表，请前往官方发布公告

Angular是MIT许可下的开源软件。欢迎大家通过Angular的GitHub仓库做出贡献。

关于作者

Guy Nesher

显示更多显示更少

[

受此内容启发？为InfoQ写文章吧。

成为InfoQ的编辑是我职业生涯中最好的决定之一。它挑战了我，并在很多方面帮助我成长。我们很希望有更多的人加入我们的团队。

Thomas Betts软件架构与设计主管编辑@InfoQ；高级首席工程师

为InfoQ写文章

](www.infoq.com/url/t/9f7cc…)

给这篇文章评分

采用

风格

联系的作者

此内容属于网站开发主题

相关话题。

相关内容

淘宝网上卖的是什么？

每周二发送的InfoQ上周的内容综述。加入由超过25万名资深开发者组成的社区。查看示例

输入您的电子邮件地址

选择您的国家 我同意InfoQ.com按照本隐私声明中的解释处理我的数据。

我们保护您的隐私。

陌生人你好!

你需要注册一个InfoQ账户或登录，或登录后才能发表评论。但注册的背后还有很多东西。

从InfoQ的体验中获得最大的收益。

告诉我们你的想法

允许的html：a,b,br,blockquote,i,li,pre,u,ul,p

给我发邮件回复我在这个主题中的任何信息

社区评论

观察主题

关闭

您的回复

引用原始信息

允许的html: a,b,br,blockquote,i,li,pre,u,ul,p

给我发邮件回复我在这个主题中的任何信息

取消

关闭

您的回复

允许的html: a,b,br,blockquote,i,li,pre,u,ul,p

给我发邮件回复我在这个主题中的任何信息

取消

关闭

认可

讨论

avatar
文章
阅读
粉丝