Angular SignalStore中用resource调用API触发NG0203错误的咨询

错误原因 #

1. 注入上下文不匹配：你在withMethods的工厂函数中直接创建resource实例，该函数不在Angular的注入上下文范围内，因此触发NG0203错误。
2. 默认自动执行请求：resource默认会在创建时自动调用loader函数，这也是改用withProps后请求自动发送的原因，不符合你按需触发的需求。

正确实现方式 #

步骤1：在Store中定义懒加载的Resource #

通过withProps创建一个懒加载的resource（设置lazy: true禁止自动执行），withProps的工厂函数处于注入上下文内，不会触发NG0203：

withProps(() => ({
  _toastService: inject(ToastService),
  // 定义懒加载的resource，初始化时不发送请求
  _postOfferResource: resource({
    loader: async () => {
      const response = await fetch(`${apiUrl}/api/offers`, {
        method: 'POST', // 注意：原代码用了GET，若为POST请求需显式指定方法
        // 按需添加请求配置，比如请求头、请求体
        // headers: { 'Content-Type': 'application/json' },
        // body: JSON.stringify(/* 提交的数据 */)
      });
      return await response.json();
    },
    lazy: true // 关键配置：禁止自动加载
  }),
})),

步骤2：添加按需触发的方法 #

在withMethods中定义方法，手动调用resource的refresh()触发请求，同时处理结果或更新Store状态：

withMethods((store) => ({
  // 供组件调用的按需触发方法
  async triggerPostOffer() {
    try {
      await store._postOfferResource.refresh();
      // 获取请求结果
      const result = store._postOfferResource.result();
      if (result) {
        // 按需更新Store状态
        // patchState(store, { /* 更新数据 */ });
        store._toastService.success('提交成功');
      }
    } catch (error) {
      store._toastService.error('提交失败');
      console.error('请求错误:', error);
    }
  },

  updateDetails: (details: any) => {
    patchState(store, {details});
  }
})),

步骤3：组件中绑定按钮触发 #

在组件模板中把Store的triggerPostOffer方法绑定到按钮点击事件：

<button (click)="publisherStore.triggerPostOffer()">提交Offer</button>

关键说明 #

• lazy: true：让resource仅在手动调用refresh()或load()时才执行请求，避免初始化时自动发送。
• 可以通过resource.result()获取返回数据、resource.error()捕获错误、resource.loading()判断加载状态，这些Signal可直接在组件或Store的computed逻辑中使用。

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