Mit Angular 19 的框架是一个新的和跨度的功能：ResourceAPI。该 API 是通过 HTTP-Anfragen einfacher、结构和效率实现的。 Aber vor allem hebt es diese in die Welt der Signals。 Hiermit geht das Angular-Team einen weiteren und essentiellen Schritt, Angular komplett auf Signals umzustellen。

在Blogbeitrag werfen wir einen Blick darauf中，是Resource API ist，welche Vorteile sie bietet und wie sie verwendet werden kann。

是什么新事物？

Mit Angular 19 已支持 ResourceAPI。异步加载已完成，并且与资源相关的反应性 Schnittstelle。

**Achtung，ResourceAPI 不是实验性的。 Von einem produktiven Einsatz 率 ich dringend ab.**

versprechen wir uns davon 吗？

这个 API 有什么用处？

Als beispielhaftes Backend nutze ich in folgenden Beispielen die API von restful-api.dev。

了解 Angular 19 Projekt 中的所有组件，并包含内联模板和样式。

ng g c ApiResourceDemoComponent --inline-style=true --inline-template=true --change-detection=OnPush --skip-tests=true

在装载数据的组件中，Fehler- und Loading-State darstellen sowie nach erfolgreichem abholen der Daten diese darstellen。

Hierzu nutzen wir die neue ResourceAPI。

import { JsonPipe } from '@angular/common';
import { ChangeDetectionStrategy, Component, resource, signal } from '@angular/core';


@Component({
  selector: 'app-api-resource-demo',
  imports: [JsonPipe],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    

      @if(dataResource.isLoading()) {
        Loading...
      }
      @if(dataResource.error()) {
        Error while loading data 
      }
      @if(!dataResource.isLoading() && dataResource.hasValue()) {
        
{{ dataResource.value() | json }}
      }
      

      

      Reload data
    
  `,
})
export class ApiResourceDemoComponent {
    protected readonly id = signal(1);
    protected readonly dataResource = resource({
      request: () => ({id: this.id()}),
      loader: async ({request, abortSignal}) => await (await fetch(`https://api.restful-api.dev/objects/${request.id}`, { signal: abortSignal })).json()
    });


    protected onReload() {
      this.dataResource.reload();
    }
}

Das ID Signal steht hier exemplarisch für eine in irgend einer Art von außen gesetzte Variable.

通过请求和加载程序来调用“dataResource”。请求就是参数，Angular Team 的命名方式是 100% 正确的。

加载器通过 fetch gelöst wird 生成 HTTP 请求。 Das Abort-Signal ermöglicht es，den Request vorzeitig abzubrechen。

The Resource ermöglicht es, abzufragen ob der Request noch in Gange ist (`isLoading`), ob ein Fehler aufgetreten ist (`error`) 和 ob der Request mit Daten beantwortet wurde (`hasValue` 和 `value`)。

Wege ein Reload durchzuführen。

法齐特

ResourceAPI 是一种工作方式，是 Angular-Anwendungen vereinfacht 的开发，是在 Ihrer Anwendung verwaltet 中实现异步数据的。 Kommen Sie bei Fragen gerne 通过 Kommentare 或 direkt über meine 网站 auf mich zu。

更多资源