Angular函数式Resolver中如何注入NGRX Store？

你的问题核心是函数式Resolver的依赖注入方式错误，导致Store实例未被正确初始化，进而触发pipe不存在的报错。以下是具体修正方案：

错误根源 #

函数式Resolver不能通过参数默认值使用Inject()装饰器获取依赖，必须使用Angular专为函数式场景提供的inject()函数（从@angular/core导入）来实例化依赖。你的写法导致store并未被注入为合法的Store实例，自然无法调用pipe方法。

修正后的完整代码 #

import { ResolveFn, inject } from '@angular/router';
import { Store } from '@ngrx/store';
import { loadCategoriesByParentCategoryCodeRequest } from './your-action-path'; // 替换为实际action路径
import { first, tap, finalize, map } from 'rxjs/operators';

export const loadCategoriesParentCategoryCodeResolver: ResolveFn<boolean> = (route, state) => {
  // 用inject()函数获取Store实例，这是函数式DI的标准用法
  const store = inject(Store);
  let loading = false;

  return store.pipe(
    tap(() => {
      if (!loading) {
        loading = true;
        store.dispatch(
          loadCategoriesByParentCategoryCodeRequest({ parentCategoryCode: null })
        );
      }
    }),
    // 监听状态中分类加载完成的标志（替换为你实际的状态选择器）
    map(appState => appState.categories?.isLoaded || false),
    // 直到加载完成才发出值，确保Resolver等待数据就绪
    first(isLoaded => isLoaded),
    finalize(() => loading = false)
  );
};

关键修改点 #

1. 修正注入逻辑：用const store = inject(Store);替代参数默认值的Inject(Store)，这是Angular函数式依赖注入的正确方式。
2. 匹配返回值类型：原代码直接返回Store的Observable，需通过map转换为boolean类型，并通过first(isLoaded => isLoaded)确保Resolver等待数据加载完成后再结束。
3. 补充必要导入：确保导入rxjs/operators中的map、first等操作符。

简化场景（无需等待加载完成） #

如果业务逻辑只需要触发action后立即完成Resolver，可简化为：

import { ResolveFn, inject } from '@angular/router';
import { Store } from '@ngrx/store';
import { loadCategoriesByParentCategoryCodeRequest } from './your-action-path';
import { of } from 'rxjs';

export const loadCategoriesParentCategoryCodeResolver: ResolveFn<boolean> = (route, state) => {
  const store = inject(Store);
  store.dispatch(loadCategoriesByParentCategoryCodeRequest({ parentCategoryCode: null }));
  return of(true); // 直接返回已完成的Observable
};

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