使用signalStore与rxMethod创建实体时的注入上下文错误排查

错误提示翻译 #

rxMethod() 只能在注入上下文中使用，例如构造函数、工厂函数、字段初始化器，或是搭配相关依赖注入API使用的函数中。

问题原因 #

你把addEntity定义成了返回rxMethod调用的箭头函数，这种写法会让rxMethod在非注入上下文中执行——只有外部调用addEntity时才会触发rxMethod调用，此时已经脱离了Angular依赖注入的上下文环境，因此报错。

修复方案 #

将addEntity直接作为类的字段，在注入上下文（类初始化阶段）中用rxMethod完成定义，而非通过函数返回调用。以下是修正后的代码示例：

import { rxMethod } from '@ngrx/signals';
import { patchState } from '@ngrx/signals';
import { pipe, tap, switchMap } from 'rxjs';
import { tapResponse } from '@ngrx/operators';
import { inject, Injectable } from '@angular/core';

@Injectable({ providedIn: 'root' })
export class EntityService {
  // 通过inject获取依赖，确保在注入上下文内
  private entityStore = inject(YourEntityStore);
  private entityHttpService = inject(EntityHttpService);

  // 直接在字段初始化阶段调用rxMethod，处于注入上下文内
  addEntity = rxMethod<Entity>(pipe(
    tap(() => patchState(this.entityStore, { isLoading: true })),
    switchMap((entityToPush) => this.entityHttpService.createEntity(entityToPush).pipe(
      tapResponse({
        next: (createdEntity) => patchState(this.entityStore, { 
          entities: [...this.entityStore.entities(), createdEntity] 
        }),
        error: (err) => console.error('创建实体失败:', err),
        finalize: () => patchState(this.entityStore, { isLoading: false })
      })
    ))
  ));
}

关键注意点 #

• rxMethod必须在类实例化的注入上下文内执行，也就是类的字段初始化、构造函数内部，或是inject相关的工厂函数中。
• 所有依赖（store、http服务）都要通过Angular的依赖注入获取（inject或构造函数注入），避免在非上下文环境中获取实例。
• 明确rxMethod的泛型类型（如<Entity>），保证类型安全。

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