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在未来几年会变得更受欢迎！
今天就到这里了，再见🙋
如果你有任何问题或反馈，请点击评论或通过领英联系我——我洗耳恭听！
- 登录 发表评论