为angular v19资源API创建可重复使用的加载器,其中包含2个不同类型的请求参数

我们可以为请求参数定义一个类型,然后我们可以将该函数转换为返回一个加载器函数,该函数将处理参数。

我们还可以将对象传递给资源API并传递给API。

完整代码:

import {
  Component,
  resource,
  ResourceLoader,
  ResourceLoaderParams,
  signal,
} from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
export interface TodoLoaderRequest {
  todoId: number;
  appName: string;
}
export interface Todo {
  id: number;
}
function todoLoader(): ResourceLoader<Todo, TodoLoaderRequest> {
  return ({
    request: { todoId, appName },
    abortSignal,
  }: ResourceLoaderParams<TodoLoaderRequest>) =>
    fetch(
      `https://jsonplaceholder.typicode.com/todos/${todoId}?appName=${appName}`,
      { signal: abortSignal }
    ).then((res) => res.json() as PromiseLike<Todo>);
}

@Component({
  selector: 'app-root',
  template: `
        <a target="_blank" href="https://angular.dev/overview">
          Learn more about Angular
        </a>
      `,
})
export class App {
  todoId = signal(1);
  appName = signal('test');
  todoResource = resource<Todo, TodoLoaderRequest>({
    request: () => ({
      todoId: this.todoId(),
      appName: this.appName(),
    }),
    loader: todoLoader(),
  });
}

bootstrapApplication(App);

Stackblitz Demo