在之前的Angularv15中，Angular团队通过将独立API从开发者预览版升级至稳定版，在Angular的简易性和开发者体验方面达到了一个重要的里程碑。如今，Angular将继续这一改进的势头，发布了自Angular最初推出以来最大的一次版本更新；在Reactivity、服务器端渲染和工具方面取得了巨大的飞跃。
一，重新思考响应式Reactivity
作为v16版本的一部分，Angular带来了全新的Reactivity模型的开发者预览，它为性能和开发者体验带来了显著的改进。完全向后兼容并可与当前系统互操作的，并且提供了如下的一些功能：
- 通过减少变化检测过程中的计算次数，提高运行时的性能。
- 为Reactivity带来了更简单的mental模型，使其清楚地了解视图的依赖性和通过应用程序的数据流。
- 启用细粒度的Reactivity，在未来的版本中，它将允许我们只检查受影响组件的变化。
- 在未来的版本中，通过使用Signals在模型发生变化时通知框架，使Zone.js成为可选的。
- 提供计算属性，而不会在每个变化检测周期中重新计算。
- 实现了更好的与RxJS的互操作性。
1.1AngularSignals
AngularSignals库允许你定义Reactive值并表达它们之间的依赖关系。你可以在相应的RFC中了解更多关于库的特性。下面是一个如何将其与Angular一起使用的简单示例：
@Component({
selector: 'my-app',
standalone: true,
template: `
{{ fullName() }} <button (click)="setName('John')">Click</button>
`,
})
export class App {
firstName = signal('Jane');
lastName = signal('Doe');
fullName = computed(() => `${this.firstName()} ${this.lastName()}`);
constructor() {
effect(() => console.log('Name changed:', this.firstName()));
}
setName(newName: string) {
this.firstName.set(newName);
}
}
如上代码段创建了一个计算属性值fullName,它依赖firstName和lastNamesignals，我们也声明了一个effect,它的回调函数将会在其读取的信号值每次更新时执行，也就是firstName更改时重新执行，以上的fullName计算属性意味着它会依赖firstName和lastName信号值的变化。当我们设置firstName为"John"时，浏览器会打印如下的日志：
"Namechanged:JohnDoe"
1.2RxJS互操作性
你将能够通过@angular/core/rxjs-interop中的函数轻松地将signals转换为observables，该函数作为v16开发预览版中的一部分。例如，下面是如何转换signal为observable的示例：
import { toObservable, signal } from '@angular/core/rxjs-interop';
@Component({...})
export class App {
count = signal(0);
count$ = toObservable(this.count);
ngOnInit() {
this.count$.subscribe(() => ...);
}
}
下面是一个如何将observable的转换为signal以避免使用async管道的示例：
import {toSignal} from '@angular/core/rxjs-interop';
@Component({
template: `
<li *ngFor="let row of data()"> {{ row }} </li>
`
})
export class App {
dataService = inject(DataService);
data = toSignal(this.dataService.data$, []);
}
Angular用户通常希望在相关Subject完成时完成一个流，以下模式非常常见：
destroyed$ = new ReplaySubject<void>(1);
data$ = http.get('...').pipe(takeUntil(this.destroyed$));
ngOnDestroy() {
this.destroyed$.next();
}
接下来，我们介绍一种新的RxJS操作符takeUntilDestroyed，简单使用示例如下：
data$=http.get('…').pipe(takeUntilDestroyed());
默认情况下，此操作符将注入当前的清理上下文。假如在组件中使用，它将使用组件的生命周期。当你想要将Observable的生命周期与特定组件的生命周期联系起来时,takeUntilDestroy特别有用。而takeUntilDestroy是基于下文的DestroyRef实现的。
1.3signals下一阶段
接下来我们将研究基于信号组件，信号组件将会简化生命周期钩子函数以及一种简单的声明式输入(inputs)和输出(outputs)，我们还将编写一套更完整的示例和文档。
Angular仓储中最受欢迎的Issue是“Proposal:InputasObservable”。几个月前，我们回应说要支持这个特性为框架的一部分，我们很高兴与大家分享，今年晚些时候，我们将推出一项功能，该功能将启用基于信号的输入——你将能够通过interop包将输入转换为可观测值。
二、服务器端渲染和hydration增强
根据Angular的年度开发者调查，服务器端渲染是Angular的第一大改进方向。在过去的几个月里，Angular与ChromeAurora团队合作，改善了hydration和服务器端渲染的性能和DX。今天，Angular带来了完整应用非破坏性hydration的开发者预览。
在新的完整应用非破坏性 hydration 中，Angular 不再从头开始重新渲染应用。相反，该框架在构建内部数据结构时查找现有的 DOM 节点，并将事件监听器附加到这些节点上。这么做的好处是：
- 对终端用户来说，页面上没有内容的闪烁。
- 在某些情况下有更好的 Web Core Vitals。
- 面向未来的架构，可以用我们今年晚些时候推出的基元实现细粒度的代码加载。
- 只需几行代码就能与现有的应用程序轻松集成。
- 对于执行手动 DOM 操作的组件，在模板中使用 ngSkipHydration 属性逐步采用 hydration。
在早期测试中，我们看到 Largest Contentful Paint 通过全应用程序 Hydration 作用提高了45%。一些应用已经在生产中实现了 Hydration，并报告了 CWV 的改进：开始体验只需要在main.ts中添加如下几行代码即可。
import {
bootstrapApplication,
provideClientHydration,
} from '@angular/platform-browser';
...
bootstrapApplication(RootCmp, {
providers: [provideClientHydration()]
});
2.1 新的服务器端渲染特性
作为 v16 版本的一部分，我们还更新了 Angular Universal 的 ng-add 原理图，使你能够使用独立 API 将服务器端渲染添加到项目中。我们还为内联样式引入了对更严格的 内容安全策略的支持。
2.2 Hydration 和服务端渲染的下一步
v16 中的工作只是一块垫脚石，我们计划在这里做更多的工作。在某些情况下，有机会延迟加载对页面不重要的 JavaScript，并在以后对相关组件进行 Hydrate。这种技术被称为部分 Hydrate，我们将在下一步对其进行探索。
自从 Qwik 从谷歌的封闭源代码框架 Wiz 中推广了可恢复性的想法以来，我们在 Angular 中收到了许多关于这一功能的请求。可恢复性肯定在我们的路线图上，我们正在与 Wiz 团队密切合作，探索更多的空间。我们对它所带来的开发人员体验的限制持谨慎态度，评估不同的权衡，并将在我们取得进展时随时向你通报。
你可以通过阅读 “What’s next for server-side rendering in Angular” 查看更多未来的计划。
三、改进对独立组件/指令/管道的工具
Angular 是一个被数百万开发人员用于许多关键使命的应用程序框架，我们认真对待重大变更，我们 几年前 就开始探索独立的 APIs，2022 年我们在开发者预览下发布了它们，现在，经过一年多的收集反馈和对 APIs 的迭代，我们希望被更广泛的采用！
为了支持开发人员将其应用程序转换为独立 APIs，我们开发了迁移原理图和独立组件迁移指南，你进入项目执行如下命令：
ng generate @angular/core:standalone
原理图将转换你的代码，删除不必要的 NgModules类，最后将项目的引导程序更改为使用独立的 APIs。
3.1 独立ng new集
作为 Angular v16 的一部分，你可以一开始就创建一个新的独立项目，要尝试独立 APIs 原理图的开发预览版，请确保你在 Angular CLI v16 上并运行：
ng new --standalone
你将在没有任何NgModules的情况下获得更简单的项目目录，此外，项目中的所有生成器都将生成独立的指令、组件和管道。
3.2 配置 Zone.js
在独立 APIs 首次发布后，我们从开发人员那里听说，希望能够使用新的 bootstrapApplication API 来配置 Zone.js。我们通过 provideZoneChangeDetection 添加了一些选项：
bootstrapApplication(App, {
providers: [provideZoneChangeDetection({ eventCoalescing: true })]
});
3.3 基于 esbuild 的构建系统的开发预览版
一年多前，我们宣布正在 Angular CLI 中对 esbuild 进行实验性支持，以加快构建速度。今天，我们很高兴与大家分享，在 v16 中，我们基于 esbuild 的构建系统进入了开发预览版！ 早期测试显示，冷生产环境构建改善了 72% 以上。
在 ng serve 中，我们现在使用 Vite 作为开发服务器，esbuild 提供在开发和生产环境的构建。
我们想强调的是，Angular CLI 完全依赖 Vite 作为开发服务器。为了支持选择器匹配，Angular 编译器需要维护组件之间的依赖关系图，这需要与 Vite 不同的编译模型。你可以通过更新 angular.json 来尝试 Vite + esbuild :
...
"architect": {
"build": { /* Add the esbuild suffix */
"builder": "@angular-devkit/build-angular:browser-esbuild",
...
接下来，在我们将这一特性从开发者预览提升到正式版之前，我们将解决对 i18n 的支持问题。
3.4 自动完成模板中的导入
你使用模板中的组件或管道从 CLI 或语言服务中获得错误的次数是多少次，而实际上没有导入相应的实现？我猜应该是很多次。语言服务现在允许自动导入组件和管道。
如上动图显示了 VSCode 中 Angular 语言服务的自动导入功能。
四、改善开发者体验
除了我们重点关注的大型计划外，我们还致力于引入备受要求的功能。
4.1 输入必填（Required inputs）
自从我们在 2016 年引入 Angular 以来，如果不为特定输入指定值，就不可能出现编译时错误。由于 Angular 编译器在构建时执行检查，因此此更改在运行时增加了零开销，多年来，开发人员一直在要求这个功能，我们得到了一个强有力的指示，这将非常方便！在 v16 中，可以根据需要标记输入为 required ：
@Component(...)
export class App {
@Input({ required: true }) title: string = '';
}
4.2 将路由器数据作为组件输入进行传递
路由的开发经验一直在快速发展，GitHub 上一个 流行的功能请求 是要求能够将路由参数绑定到相应组件的输入。我们很高兴与大家分享这一功能现已作为 v16 版本的一部分提供。现在，可以将以下数据传递给路由组件的输入：
- 路由 data — resolvers 和 data 属性
- Path 参数
- Query 参数
以下是如何访问路由 resolver 数据的示例：
const routes = [
{
path: 'about',
loadComponent: import('./about'),
resolve: { contact: () => getContact() }
}
];
@Component(...)
export class About {
// The value of "contact" is passed to the contact input
@Input() contact?: string;
}
4.3 CSP 对内联样式的支持
Angular 在组件样式的 DOM 中包含的内联样式元素违反了默认 style-src 内容安全策略（CSP） 。要解决此问题，它们应该包含一个 nonce 属性，或者服务器应该在 CSP 头中包含样式内容的哈希。尽管在谷歌，我们没有发现针对该漏洞的有意义的攻击向量，但许多公司实施了严格的 CSP，导致 Angular 仓储上的 功能请求 广受欢迎。
在 Angular v16 中，我们实现了一个跨越框架、Universal、CDK、Material 和 CLI 的新功能，该功能允许你为 Angular 内联的组件的样式指定 nonce 属性。有两种方法可以指定 nonce：使用 ngCspNonce 属性或通过 CSP_NONCE 注入令牌。
如果您有权访问服务器端模板，则 ngCspNonce 属性非常有用，该模板可以在构造响应时将 nonce 添加到标头和 index.html 中。
<html>
<body>
<app ngCspNonce="{% nonce %}"></app>
</body>
</html>
另一种方法是通过CSP_NONCE注入令牌指定 nonce。如果你在运行时可以访问 nonce，并且希望能够缓存 index.html，请使用此方法：
import {bootstrapApplication, CSP_NONCE} from '@angular/core';
import {AppComponent} from './app/app.component';
bootstrapApplication(AppComponent, {
providers: [{
provide: CSP_NONCE,
useValue: globalThis.myRandomNonceValue
}]
});
4.4 灵活的 ngOnDestroy
Angular 的 Lifecycle Hooks 提供了大量的功能，可以插入应用程序执行的不同时刻，如何实现更高的灵活性是一种机会和选择，例如，提供对 OnDestroy as an observable 访问作为一种可观察的方式。
在 v16 中，我们使 OnDestroy 可以被注入，此功能实现了开发人员一直要求的灵活性。新功能允许你注入与组件、指令、服务或管道相对应的DestroyRef ，并注册onDestroy 生命周期钩子函数。DestroyRef 可以被注入到注入上下文中的任何位置，包括组件之外 —— 在这种情况下，当相应的注入器被销毁时，ngDestroy 钩子就会被执行：
import { Injectable, DestroyRef } from '@angular/core';
@Injectable(...)
export class AppService {
destroyRef = inject(DestroyRef);
destroy() {
this.destroyRef.onDestroy(() => /* cleanup */ );
}
}
4.5 自动关闭标签 (Self-closing tags)
我们最近实现的一个 备受要求的功能 ，允许你对 Angular 模板中的组件使用自闭标签，这是一个小的开发体验改进，可以为你节省一些打字时间。比如：
<super-duper-long-component-name [prop]="someVar"></super-duper-long-component-name>
//替换为
<super-duper-long-component-name [prop]="someVar" />
4.6 更好、更灵活的组件
在过去的几个季度里，我们与谷歌的 Material Design 团队密切合作，为 Angular Material 的 Web 提供了 Material 3 实现。我们在 2022 年交付的基于 MDC Web 的组件为这项工作奠定了基础。
作为下一步，我们正在努力在今年晚些时候推出一个基于 expressive token-based 的主题化 API，该 API 支持 Angular Material 组件的更高定制。
提醒一下，我们将在 v17 中删除遗留的、非基于 MDC 的组件，请确保你按照我们的 迁移指南 进行迁移，以获得最新版本。
参考文档：文章来源：https://www.toymoban.com/news/detail-473053.html
https://blog.angular.io/angular-v16-is-here-4d7a28ec680d文章来源地址https://www.toymoban.com/news/detail-473053.html
到了这里，关于Angular 16 正式版发布的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
