Angular v19 (一)：新版本来啦，一起瞧瞧新特性吧！

余生H

已于 2024-11-27 15:04:53 修改

阅读量1.5k

点赞数 16

分类专栏： Angular 文章标签：前端 javascript angular.js

于 2024-11-27 12:43:41 首次发布

本文链接：https://blog.csdn.net/m0_38015699/article/details/144079803

版权

Angular 专栏收录该内容

3 篇文章

订阅专栏

Angular v19的发布（2024年11月16日）标志着近几年来项目队伍对开发者体验和性能的严负投入及不断改进。在每次发布中，因为对性能和用户体验的重视，这些改进不仅是表面的，而且为应用网站提供更加顺畅的整体体验。在v19版本中，项目队伍将发布一系列改进，为应用提供更加便捷的构建和最佳的性能支持。

因为个人用angular也有四年的历史，断断续续的在项目中用，从v5-v18，最新的版本又出来了，所以挖个坑先

核心改进

增量水合技术：此功能支持更高性能需求的活动。开发者可以控制路由是否在客户端、服务器端还是在构建时渲染，并可以在预渲染时解决路由参数，以满足高性能需求。这为活动渲染提供了更多的选项，使应用最佳化输出。

在Angular v19中，团队推出了一项名为“增量水合（Incremental Hydration）”的新技术，它允许开发者对页面的部分组件进行延迟加载和激活。通过使用熟悉的 @defer 语法，你可以指定哪些部分需要在特定触发条件下才被加载和激活，这一功能极大地提高了大型应用的加载速度和用户体验。

例如，你可以这样使用增量水合：
```
@defer (hydrate on viewport) {
  <shopping-cart/>
}
```
在上述代码中，当 <shopping-cart> 组件进入视口时，Angular 才会下载并激活它。
核心响应进入稳定：新引入的linkedSignal和resource扩展了响应方案，通过为不同的使用场景设计最佳化解决方案，更加顺平地解决了应用起来的应用效果和补充效果。

Angular v19还引入了一些新的信号系统特性，包括 linkedSignal 和 resource。linkedSignal 允许创建一个可写的信号，该信号可以跟踪更高层次的状态变化，而 resource 则提供了一种处理异步操作的新方法，使得数据获取更加直观和高效。

示例代码：
```
const options = signal(['apple', 'banana', 'fig']);
const choice = linkedSignal(() => options()[0]);

choice.set('fig');
console.log(choice()); // 输出 'fig'

options.set(['peach', 'kiwi']);
console.log(choice()); // 输出 'peach'
```
进一步完善应用中的响应系统：Angular v19继续在响应系统上加大投入，为了提高用户体验，进一步完善了inputs、outputs和视图查询，通过应用提供更好的可运行性和顺平体验。

linkedSignal 详解

Angular v19 引入了一个全新的信号特性，称为 linkedSignal，它在处理组件状态同步时非常有用。linkedSignal 是一种可写的信号，用于跟踪更高层次的状态变化，尤其适合在多个相关状态之间建立动态关系。

linkedSignal 的核心思想是允许你创建一个信号，该信号的值可以基于其他信号的变化而自动更新。这种机制使得开发者在处理复杂状态依赖时不再需要手动更新所有相关状态，从而简化了代码逻辑。

例如，假设我们有一个水果列表，和一个选中的水果状态：

const options = signal(['apple', 'banana', 'fig']);
const choice = linkedSignal(() => options()[0]);

console.log(choice()); // 输出 'apple'

choice.set('fig');
console.log(choice()); // 输出 'fig'

options.set(['peach', 'kiwi']);
console.log(choice()); // 输出 'peach'

在这个示例中，linkedSignal 会在 options 信号变化时自动更新其值。通过这种方式，choice 信号始终与 options 保持同步，但开发者仍然可以手动设置 choice 的值，灵活控制应用状态。

linkedSignal 提供了两种主要用法：

基础用法：如上所示，linkedSignal 可以用于建立简单的状态依赖关系。
高级用法：在高级用法中，开发者可以访问到之前的值，以便在新值计算中使用旧值。这对于需要复杂逻辑的场景非常有用，例如在状态变更时保留特定条件下的旧值。

linkedSignal 的引入为开发者提供了一个强大的工具，特别是在需要处理多状态同步的情况下，使得代码更加简洁、可维护。

路由配置模式

Angular v19为客户端、服务器端和预渲染路由提供了更加轻松的配置方案。例如，我们可以指定路由是否需要在客户端、服务器端还是预渲染这些选项较轻松地配置，这些配置模式使应用设计更加有化和适应性。

为了更好地控制应用中的路由渲染方式，Angular v19 引入了一个新的接口 ServerRoute，允许你配置每个路由是应该服务器端渲染、客户端渲染还是预渲染。这使得开发者能够更加灵活地优化应用性能和加载时间。

举例说，我们可以使用客户端、服务器端和预渲染配置来控制路由，这些配置方式让应用可以更好地应对不同的项目需求，带来更好的运行效果和性能提高。

示例配置如下：

export const serverRouteConfig: ServerRoute[] = [
  { path: '/login', mode: RenderMode.Server },
  { path: '/dashboard', mode: RenderMode.Client },
  { path: '/**', mode: RenderMode.Prerender },
];