Angular v19 将使 standalone: true
成为组件、指令和管道的默认值。
在 v14 中,我们引入了开发者预览版的 “standalone” 功能,这使得第一次可以构建不依赖 NgModules 的 Angular 应用程序。从那时起,standalone 已经稳定下来,并成为 Angular 团队推荐的编写 Angular 代码的方式。 CLI 生成的组件默认为 standalone: true
,并且 Angular 文档首先向所有新的 Angular 开发人员教授 standalone 知识。无论是在 Google 编写的最大的 Angular 应用程序中,还是在互联网上的应用程序中,Angular 生态系统的 standalone 采用率都很强劲,并且持续增长。
standalone 不仅使 Angular 更容易学习和上手,而且还启用了一些令人兴奋的新功能。在 @angular/router
中, loadComponent
依赖于 standalone 功能,显着简化了路由级延迟加载。Directive Composition API 允许在 Host 组件或指令的声明中应用 standalone 指令,从而为组件行为提供更好的组合模型。当然,可延迟视图(Deferrable Views)在模板级别透明地延迟加载 standalone 组件和指令,使优化 Angular 应用程序变得比以往更容易。
在 v19 中,我们将采取下一步行动,翻转组件、指令和管道中 standalone 标志的默认值,因此您永远不需要再次键入“standalone: true
”。通过此更改,组件如下:
// 当前 Angular 中显示 standalone 标志的示例
@Component({
standalone: true,
imports: [UserAvatarComponent, AccountListComponent, FormsModule],
selector: 'user-profile',
template: './user-profile-component.html',
})
export class UserProfileComponent {…}
将写为:
// v19 中删除的 standalone 标志的示例
@Component({
imports: [UserAvatarComponent, AccountListComponent, FormsModule],
selector: 'user-profile',
template: './user-profile-component.html',
})
export class UserProfileComponent {…}
没关系——我们不会弃用 standalone 选项或 NgModule 本身。您仍然可以通过在组件装饰器中指定 standalone: false
来编写 NgModule 组件。
作为 v19 ng update
的一部分,我们将应用自动迁移,这将:
standalone: true
,因为它将成为新的默认组件。standalone: false
添加到现有的 NgModule 组件中,以便它们继续工作。或者,您可以设置 strictStandalone
到编译器选项,以强制在应用程序中仅编写 standalone 组件。
这里什么都不会改变。即使启用了 strictStandalone
编译器选项,standalone 组件也可以根据需要继续导入 NgModule 依赖项。
如果您正在编写在 NPM 上发布的库,您也不需要执行任何操作 – 当用户导入您的组件时,无论他们是否使用具有新默认值的 v19,您的组件都会正常运行。
原文链接:https://blog.angular.dev/the-future-is-standalone-475d7edbc706
翻译原文:https://zhuanlan.zhihu.com/p/718140750