Angular 17 有什么新功能？
Angular v17 来了！
这是一个功能丰富的主要版本：让我们开始吧！
angular.dev
Angular 团队最近一直在进行沟通， 通过现场活动来展示 Angular v17 的新功能， 以及一个名为 angular.dev 的新网站， 这将是未来的官方网站。 它具有相同的文档，但有一个新的交互式教程， 还有一个游乐场，可以在不安装任何东西的情况下尝试 Angular （就像 Vue 或 Svelte 一样）。
Angular 还有一个新标志，您可以在这篇文章的顶部看到！
控制流语法
即使它只是一个“开发者预览”功能，这也是一个很大的功能！ Angular 模板正在演变为对控制流结构使用新的语法。
我们写了一篇关于这个功能的专门博客文章：
实验性迁移允许您在项目中尝试一下。 语法应该在 v18 中变得稳定，并且是此时编写模板的推荐方法。
可延迟视图
另一个重要功能是引入了模板中使用的可延迟视图。@defer
我们写了一篇关于这个功能的专门博客文章：
这也是一个“开发者预览”功能，应该在 v18 中变得稳定。 它可能比控制流语法的影响小， 但是，有一种方法可以轻松地延迟加载模板的某些部分仍然很有趣。
信号现在很稳定！
信号 API 现在标记为稳定?版。 除了 和 RxJS 互操作性功能，这些功能可能会更改，并且仍标记为“开发者预览版”。effect()toSignaltoObservable
自从我们关于信号的博客文章以来，API 没有太大变化， 但是发生了一些值得注意的事情。
mutate 已被删除
mutate()已从 API 中删除。 你以前可以写这样的东西：
users.mutate(usersArray => usersArray.push(newUser));你现在必须写：
users.update(usersArray => [...usersArray, newUser]);该方法引入了其他库的一些问题， 而且不值得麻烦，因为它可以很容易地被取代。mutate()update()
模板诊断
新的编译器诊断程序可帮助您发现模板中缺少的信号调用。
假设您在模板中使用了一个信号，但忘记了：count()
<div>{{ count }}</div>投掷：
NG8109: count is a function and should be invoked: count()flush效果
新方法可用（作为开发人员预览版） 在类上触发挂起的效果：TestBedflushEffects
TestBed.flushEffects();这是因为效果时间发生了一些变化： 它们不再由更改检测触发，而是通过微任务队列进行调度 （喜欢或）。 因此，虽然您以前可以通过调用灯具来触发它们， 您现在必须致电 .setTimeout()Promise.resolve()detectChanges()TestBed.flushEffects()
afterRender 和 afterNextRender 阶段
Angular v16.2 中引入的 and 函数 现在可以指定一个选项。 Angular 使用此阶段来调度回调以提高性能。 有 4 个可能的值，它们按以下顺序运行：afterRenderafterNextRenderphase
EarlyRead（当您需要在写入 DOM 之前读取 DOM 时）Write（如果要写入 DOM，则需要，例如，使用第三方库初始化图表）MixedReadWrite（默认值，但应尽可能避免使用更具体的阶段）Read（如果您只需要阅读 DOM，则推荐使用）
我认为在大多数情况下，我们应该能够使用。 并降低性能，因此应尽可能避免使用。ReadWriteEarlyReadMixedReadWrite
export class ChartComponent {
@ViewChild('canvas') canvas!: ElementRef<HTMLCanvasElement>;
constructor() {
afterNextRender(() => {
const ctx = this.canvas.nativeElement;
new Chart(ctx, { type: 'line', data: { ... } });
}, { phase: AfterRenderPhase.Write });
}
}性能
内部算法更改为使用引用计数机制，而不是基于双向弱引用的机制。在许多情况下，它应该比以前性能更高。
还值得注意的是，变化检测算法已得到改进，以便在使用信号时更加高效。 以前，在读取模板中的信号时，Angular 会标记组件 当信号更新时，它的所有祖先都肮脏 （就像目前在组件被标记为检查时所做的那样）。 它现在更聪明了，只在信号更新时将组件标记为脏，而不是它的所有祖先。 它仍然会检查整个应用程序树， 但是算法会更快，因为某些组件将被跳过。OnPush
我们还没有办法编写纯基于信号的组件，不需要 ZoneJS， 但它最终应该会到来！
styleUrls 字符串
修饰器的 and 属性现在可以是字符串，而不是字符串数组。 还引入了一个名为styleUrlsstyles@ComponentstyleUrl
您现在可以编写：
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrl: './app.component.css',
})
export class AppComponent {}View Transitions 路由器支持
View Transitions API 是一个相当新的浏览器 API 这允许您对两个视图之间的过渡进行动画处理。 它仅在最新版本的 Chrome、Edge 和 Opera 中受支持（请参阅 caniuse.com 统计信息） 但还没有在Firefox中。 它的工作原理是截取当前视图的屏幕截图并将其动画化为新视图。
我对这个API不是很熟悉， 但是这个网站上有一篇关于它的精彩文章 developer.chrome.com 很酷的演示（当然，使用支持此 API 的浏览器打开它）。
Angular v17 在路由器中添加了对此 API 的支持。 这是一项实验性功能，您必须使用以下命令启用它：withTransitionViews()
bootstrapApplication(AppComponent, {
providers: [{ provideRouter(routes, withTransitionViews()) }]
});默认情况下，从一条路由导航到另一条路由时，视图之间会有一个很好的淡入/淡出过渡。 您可以使用 CSS 自定义动画，对整个视图进行动画处理或跳过其中的一部分， 或者指出哪些 DOM 元素实际上是旧视图和新视图中的相同实体： 然后，浏览器将尽最大努力在状态之间进行动画处理。
可以使用以下选项跳过初始转换：skipInitialTransition
bootstrapApplication(AppComponent, {
providers: [{ provideRouter(routes, withTransitionViews({ skipInitialTransition: true })) }]
});更高级的方案需要向视图添加/删除 CSS 类， 因此，路由器还允许您在转换完成时运行任意函数 如果使用该选项定义回调。onViewTransitionCreated
Http的
fetch 后端（在 Angular v16.1 中引入） 已提升为稳定版。
使用 SSR 时，现在可以使用 自定义传输缓存。 选项可以是：withHttpTransferCacheOptions(options)
filter：过滤应缓存的请求的函数includeHeaders：要包含的标头列表（默认为无）includePostRequests：是否缓存 POST 请求（默认只缓存 GET 和 HEAD 请求）
例如：
bootstrapApplication(AppComponent, {
providers: [provideHttpClient({
withHttpTransferCacheOptions({ includePostRequests: true })
})
});开发工具
devtools也得到了一些喜爱， 它们现在允许您检查依赖注入树。
动画
Angular 的这一部分没有新功能， 但现在可以延迟加载动画包。 在独立应用程序中，您可以使用而不是 使用和动画所需的代码将异步加载。provideAnimationsAsync()provideAnimations()
应用程序应该工作相同， 但是，在构建应用程序时，您应该会看到一个额外的块出现。 这是几千字节的JavaScript，您不必预先?加载。
您可以通过提供以下值来禁用动画：'noop'provideAnimationsAsync()
bootstrapApplication(AppComponent, {
providers: [provideAnimationsAsync('noop')]
});性能
在开发模式下，如果加载超大图像，现在会收到警告 或者，如果图像是页面中的“最大内容绘制元素”，并且是延迟加载的 （这是个坏主意，请参阅此处的解释）。
例如：
An image with src image.png has intrinsic file dimensions much larger than its
rendered size. This can negatively impact application loading performance.
For more information about addressing or disabling this warning, see
https://angular.io/errors/NG0913您可以通过依赖注入来配置此行为， 例如，如果要关闭以下警告：
{
provide: IMAGE_CONFIG, useValue:
{
disableImageSizeWarning: false,
disableImageLazyLoadWarning: false
}
}TypeScript 5.2 和 Node.js v18
值得注意的是，Angular 现在需要 TypeScript 5.2 和 Node.js v18。 已删除对旧版本的支持。
Angular 命令行界面
CLI 中发生了很多事情！
? 有关更多详细信息，请查看我们关于 CLI v17 的专用博客文章。
总结
这就是此版本的全部内容，敬请期待！
本文系外文翻译，前往查看
如有侵权，请联系?cloudcommunity@tencent.com?删除。
本文系外文翻译，前往查看
如有侵权，请联系?cloudcommunity@tencent.com 删除。