Angular中文博客
分享让你更聪明
And we’re back with Angular’s latest minor release, version 19.2, bringing new APIs and experimental features to empower developers on their next great app.
我们带着 Angular 的最新小版本 19.2 回来了，它带来了新的 API 和实验性功能，为开发人员开发下一个出色的应用程序提供支持。
In Angular v19 we released the experimental resource API, continuing our reactivity story to a new chapter — asynchronous reactivity.
在 Angular v19 中，我们发布了实验性的资源 API ，将我们的反应性故事延续到新的篇章——异步反应性。
With this release, we’re thrilled to introduce two significant updates: asynchronous reactivity with the new httpResource and resource streaming with rxResource APIs.
在此版本中，我们很高兴地推出两个重要更新：使用新的httpResource实现异步反应以及使用rxResource API 实现资源流。
Developers have been able to use signals for synchronous state in Angular since their introduction in Angular v16. At the same time developers have been curious as to how they can leverage the power, readability and maintainability of signals for asynchronous dependencies. The resource API makes it possible to interact with asynchronous data sources while leveraging the developer experience and ergonomics of signals. The resource API is a foundational building block for incorporating asynchronous actions like data fetching in Angular.
自从 Angular v16 引入信号以来，开发人员就能够使用信号来实现 Angular 中的同步状态。同时，开发人员也一直很好奇如何利用信号的强大功能、可读性和可维护性来实现异步依赖关系。资源 API 可以与异步数据源进行交互，同时利用开发人员的体验和信号的人体工程学。资源 API 是整合 Angular 中数据提取等异步操作的基础构建块。
Here’s an example of how you can use resourcein your application:
以下是如何在应用程序中使用resource的示例：
/*
component.ts
*/
readonly id = signal(1);
readonly todoResource = resource({
request: ()=> ({id: this.id()}),
loader: async ({request}) => (await fetch(
`https://jsonplaceholder.typicode.com/todos/${request.id}`)).json(),
});
/*
component.html
*/
<p>{{ todoResource.value() }}</p>If the id value updates, the loader reactively triggers the defined asynchronous operation again. Then, in the template for the component, the current value can be accessed via .value().
如果 id 值更新，加载器会再次触发定义的异步操作。然后，在组件的模板中，可以通过.value()访问当前值。
While this API is helpful, one might naturally conclude that they should use this API to fetch data asynchronously. Thanks to Mattieu Rigler for his helpful contributions, we now have another great new API for you to try out: httpResource
虽然这个 API 很有用，但人们自然会得出结论，他们应该使用此 API 来异步获取数据。感谢Mattieu Rigler 的有益贡献，我们现在有另一个很棒的新 API 供您尝试： httpResource
Used for fetching data, the experimental httpResource API creates a low friction reactive way to fetch data over HTTP. httpResource participates in Angular’s reactivity system with signals. Here’s an example of using it in action:
用于获取数据的实验性httpResource API 创建了一种通过 HTTP 获取数据httpResource低摩擦反应方式。httpResource 通过信号参与 Angular 的反应系统。以下是实际使用示例：
// returns a signal
currentUserId = getCurrentUserId();
// A reactive function as argument
user = httpResource(() => `/api/user/${currentUserId()}`); Here, httpResource reacts to changes in the signal currentUserId. When currentUserId updates, httpResource triggers a new asynchronous request. Because the API leverages HttpClientit gives you access to features such as interceptors.
这里， httpResource对信号currentUserId变化做出反应。当currentUserId更新时， httpResource会触发新的异步请求。由于 API 利用了HttpClient因此它使您可以访问拦截器等功能。
While we’re on the topic of asynchronous requests there’s one more update that we think you’ll really enjoy. We’ve added support for streaming multiple responses using the rxResource API. Check out this example:
在我们讨论异步请求时，还有一个更新我们认为您会非常喜欢。我们添加了使用rxResource API 流式传输多个响应的支持。查看此示例：
/*
component.ts
Using a BehaviorSubject and an setInterval to create a stream of values
that generates a new value every 1000ms
*/
readonly subject = new BehaviorSubject<number>(1);
readonly intervalId = setInterval(() => {
this.subject.next(this.subject.value + 1);
}, 1000);
/* rxResource will stream values as they arrive */
readonly resource = rxResource({
loader: () => this.subject,
});
/*
component.html
Display the latest values that have been returned
*/
<section>
<p>{{ resource.value() }}</p>
</section>This could be helpful in scenarios where you are connecting to an endpoint that returns multiple values.
当您连接到返回多个值的端点时，这可能会有所帮助。
These new APIs are still under development and what’s great is that there’s a new RFC (request for comments) for the resource API available for you to share your thoughts and help us shape this new API.
这些新的 API 仍在开发中，值得一提的是，资源 API 有一个新的 RFC（征求意见稿），您可以分享您的想法并帮助我们塑造这个新的 API。
The Angular template authoring experience just keeps improving. Angular templates now support untagged template literal expressions, making string concatenation and escaping single or double quote strings easier.
Angular 模板创作体验不断改进。Angular 模板现在支持未标记的模板文字表达式，使字符串连接和转义单引号或双引号字符串更加容易。
For example, it’s less cumbersome to dynamically interpolate a value from your class into your template. Check out this example:
例如，将类中的值动态插入到模板中就没那么麻烦了。看看这个例子：
<div [class]="`layout col-${colWidth}`"></div>This improved experience makes interpolating values even smoother.
这种改进的体验使得插值更加顺畅。
This isn’t the only update we’re launching in Angular v19.2 — there are new migrations such as being able to migrate to convert to self closing tags (thanks eneajaho!), supporting the Set type in forms, adding skip hydration diagnostic and so much more. If you’d like to see even more updates from Angular v19.2, be sure to check out the change log on GitHub.
这不是我们在 Angular v19.2 中推出的唯一更新 – 还有新的迁移，例如能够迁移以转换为自闭合标签（感谢eneajaho ！），支持表单中的 Set 类型，添加跳过水合诊断等等。如果你想看到来自 Angular v19.2 的更多更新，请务必查看GitHub 上的更改日志。
Angular v19.2 is ready for your applications today so go ahead, update and go build great apps.
Angular v19.2 现已为您的应用程序做好准备，因此请继续更新并构建出色的应用程序。
New to Angular? Check out angular.dev/tutorials to start building with Angular today.
刚接触 Angular？查看angular.dev/tutorials ，立即开始使用 Angular 进行构建。
Author Mark (Techson) Thompson
作者马克（Techson）汤普森
原文来源：https://blog.angular.dev/angular-19-2-is-now-available-673ec70aea12