Angular 19资源API：创建带双不同类型参数的可复用加载器

要给资源加载器添加多个请求参数，核心是通过自定义复合类型封装多个参数，再在加载器函数中解构使用。以下是完整实现步骤：

1. 定义复合请求参数类型 #

创建类型别名或接口，包含你需要的todoId（number类型）和appName（string类型）：

// 封装多请求参数的类型
type TodoLoaderRequest = {
  todoId: number;
  appName: string;
};

// 定义Todo返回类型（根据接口实际返回结构调整）
interface Todo {
  id: number;
  title: string;
  completed: boolean;
  // 接口返回的其他字段
}

2. 修改资源加载器函数 #

更新todoLoader，让它接收复合类型的请求参数，解构后拿到两个参数并用于请求：

import { ResourceLoaderParams, resource } from "@angular/core";

function todoLoader({ request: { todoId, appName }, abortSignal }: ResourceLoaderParams<TodoLoaderRequest>): Promise<Todo> {
  // 示例将appName作为查询参数拼接，可根据接口需求改为路径参数或请求体
  const url = `https://jsonplaceholder.typicode.com/todos/${todoId}?appName=${encodeURIComponent(appName)}`;
  
  return fetch(url, { signal: abortSignal })
    .then(res => {
      // 可选：添加请求失败的错误处理
      if (!res.ok) throw new Error(`请求失败：${res.status}`);
      return res.json() as Promise<Todo>;
    });
}

3. 初始化资源时传入完整参数 #

创建todoResource时，传入包含两个参数的对象作为request值：

// 假设组件中已定义todoId和appName变量
todoResource = resource({ 
  request: { todoId: this.todoId, appName: this.appName }, 
  loader: todoLoader 
});

关键注意点 #

• 用encodeURIComponent处理appName这类字符串参数，避免特殊字符导致URL解析错误
• 后续需要新增参数时，直接扩展TodoLoaderRequest类型即可
• 参数的传递方式（路径、查询参数、请求体）可根据实际接口需求调整

内容的提问来源于stack exchange，提问作者st_clair_clarke