Angular的一生发生了重大变化!
你好👋
Angular v16带来了巨大的变化,这些变化肯定会改变Angular的未来、受欢迎程度和Angular开发人员的生活!
以下是Angular 16中令人兴奋的新功能列表!
🚦 信号
Signals(在开发者预览中)是Angular 16、Angular方向和整个生命中带来的最重大的变化,因为它将改变Angular检测变化的方式,并解决开发者迄今为止在Zone.js上遇到的许多痛苦。我已经谈到了Angular Signals背后的故事。你可以在这里查看。
The story behind Angular Signals!
创建独立的应用程序示意图
独立组件现已完成应用程序示意图。您可以使用Angular CLI生成一个完整的独立应用程序。V16具有强大的原理图,允许您将组件、管道和指令转换为独立的。此外,这些示意图可以删除迁移后不必要的现有ngModuel。
新生成的应用程序代码更轻(没有来自v15改进的conf文件+带有独立功能的轻量级应用程序引导;因此,没有ngModule)。
... bootstrapApplication(App, { providers: [provideHttpClient(), importProvidersFrom(FormsModule)], }).catch((err) => console.error(err));
🏎 Esbuild开发服务器
已经提供了使用esbuild进行ng生成的实验性支持。使用v16,工具团队对开发服务器进行了一些改进(在开发人员预览中)。现在,您可以使用esbuild运行服务。
要查看它,请将“"@angular-devkit/build-angular:browser"更改为“"@angular-devkit/build-angular:browser-esbuild"”。
🧪Jest支持
Jest是开发人员最喜欢和最受欢迎的测试工具之一。Angular的默认工具是Karma,但现在,Angular也在努力支持Jest,这在Angular v16的开发者预览中,这是一个大新闻!
📢 Required inputs
在零运行时开销的情况下,现在可以确保组件或指令在需要时与其所需的输入一起使用。否则,您将得到一个编译时错误。
@Input({required: true}) myInput: string; // Required @Input() myOtherInput: string; // Not required
将路由数据、路径参数和查询参数绑定到输入
这是一个非常优秀和实用的功能,它肯定会让代码更轻的开发人员的生活更轻松。我们可以利用强大的功能保护功能,直接从那里设置组件输入!
// Add the withComponentInputBinding feature to the provideRouter method. providers: [ provideRouter(appRoutes, withComponentInputBinding()), ] // Update the component to have an Input matching the name of the parameter. @Input() set id(heroId: string) { this.hero$ = this.service.getHero(heroId); }
mapToCanActivate辅助函数
在Angular 16中,类guards 是不推荐使用的,Angular提供了一个函数助手,可以轻松切换到函数,而不必删除现有的类保护。
const route: Route = { path: 'admin', canActivate: mapToCanActivate([AdminGuard]) };
DestroyRef & takeUntilDestroyed
v16附带的另一个功能是DestroyRef和takeUntilDestoryed,这在您想要取消订阅时提供了更大的灵活性。
... obs$: Observable<SomeType>; const subscripion = obs$.subscribe(...); inject(DestoryRef).onDestroy(() => subscription.unsubscribe());
无损水化支撑
是时候通过非破坏性水合支持改善用户体验了。一旦浏览器从服务器接收到渲染的标记并将其解析为文档对象模型(DOM),Angular将遍历该结构,添加事件侦听器,并创建内部数据结构。从那时起,应用程序就变成了交互式的,而不需要重新绘制过程。这将解决Angular Universal遇到“闪烁”的问题。
💡 API为内联样式表提供CSP nonce
出于安全原因,许多企业都关心内联脚本。这有时被标记为不安全和不安全。此功能将帮助您指定和公布内联样式的内容安全策略。
// Standalone version ... bootstrapApplication(AppComponent, { providers: [{ provide: CSP_NONCE, useValue: globalThis.myRandomNonceValue ]} });
我在上面没有提到很多其他很棒的功能,以使文章变得轻松,但它们在v16中也可用。以下是一个快速列表:
- ☑️ NgTemplateOutlet严格的类型检查
- ♻️ 重用服务器生成的零部件样式
- 💡 为服务器端独立应用程序提供服务器渲染
- 💙 TS 5.0支持(非实验性装饰器支持)
- 🖼️ 对NgOptimizedImage的改进,使图像能够容纳在其父容器中,而不是具有显式尺寸
- 💡 通过语言服务简化独立导入
- 💡 改进文档和材料CDK组件的可访问性
- 💡 Angular团队正在与材料设计团队密切合作,使Angular Material成为Web的参考材料设计实现
不幸的是,v16中尚未提供的一个即将推出的功能是在NgComponentOutlet中设置输入(此处为PR),这看起来像:
当创建一个动态组件以便能够直接设置其输入时,这是非常实用的。
<ng-container *ngComponentOutlet="MyComponent; inputs: myInputs" /> // In component class myInputs: { message: "Hi there!", data: [...] },
Angular v16盒子里的所有东西都很棒吗😊 … 我完全相信Angular在未来几年会变得更受欢迎!
今天就到这里了,再见🙋
如果你有任何问题或反馈,请点击评论或通过领英联系我——我洗耳恭听!
- 登录 发表评论