如何在NGXS状态中获取ActivatedRoute的paramMap以更新状态？

为什么构造函数注入 ActivatedRoute 无效 #

NGXS 状态类是单例，构造函数中注入的 ActivatedRoute 是根路由实例，无法获取当前激活路由的参数，所以在 action 中调用会得到空值。

方案1：使用 NGXS Router Plugin（官方推荐） #

你已经安装了 @ngxs/router-plugin，只需利用它自动分发的路由事件来监听路由变化，无需手动在组件中处理。

步骤： #

1. 确保在 AppModule 中导入并初始化插件：

import { NgxsModule } from '@ngxs/store';
import { NgxsRouterPluginModule } from '@ngxs/router-plugin';

@NgModule({
  imports: [
    NgxsModule.forRoot([/* 你的状态类 */]),
    NgxsRouterPluginModule.forRoot()
  ]
})
export class AppModule {}

2. 在状态类中监听 RouterNavigated 事件（导航完成后触发），获取当前路由信息并更新状态：

import { RouterNavigated, RouterState } from '@ngxs/router-plugin';
import { Action, State, StateContext } from '@ngxs/store';

// 定义你的状态模型
interface YourStateModel {
  currentRouteParam: string | null;
  queryParams: Record<string, string>;
}

@State<YourStateModel>({
  name: 'yourState',
  defaults: {
    currentRouteParam: null,
    queryParams: {}
  }
})
export class YourState {
  @Action(RouterNavigated)
  onRouteChange(ctx: StateContext<YourStateModel>, action: RouterNavigated) {
    // 获取完整路由状态快照
    const routerState = action.payload.routerState;
    // 获取当前激活路由的参数（根据路由层级调整 firstChild 的调用）
    const targetRoute = routerState.root.firstChild?.firstChild || routerState.root.firstChild;
    const routeParams = targetRoute?.params || {};
    const queryParams = routerState.root.queryParams;

    // 更新状态
    ctx.patchState({
      currentRouteParam: routeParams['yourParamName'],
      queryParams
    });
  }
}

如果需要在导航开始时处理逻辑，可以替换监听 RouterNavigation 事件。

方案2：全局路由守卫统一分发 Action #

如果不想依赖插件，可通过路由守卫统一获取路由信息并分发更新状态的 Action，避免每个组件重复写逻辑。

实现： #

1. 创建全局路由守卫：

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot } from '@angular/router';
import { Store } from '@ngxs/store';
import { UpdateRouteState } from './your-state.actions';

@Injectable({ providedIn: 'root' })
export class RouteStateGuard implements CanActivate {
  constructor(private store: Store) {}

  canActivate(route: ActivatedRouteSnapshot): boolean {
    // 获取当前路由的参数和查询参数
    const payload = {
      params: route.params,
      queryParams: route.queryParams
    };
    // 分发更新状态的 Action
    this.store.dispatch(new UpdateRouteState(payload));
    return true;
  }
}

2. 在路由配置中绑定守卫：

const routes: Routes = [
  { path: 'user/:id', component: UserComponent, canActivate: [RouteStateGuard] },
  { path: 'product', component: ProductComponent, canActivate: [RouteStateGuard] }
];

方案3：组件基类封装重复逻辑（不推荐但可行） #

如果必须在组件中处理，可封装基类减少重复代码：

import { OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Store } from '@ngxs/store';
import { UpdateRouteState } from './your-state.actions';

export abstract class RouteBaseComponent implements OnInit {
  constructor(protected route: ActivatedRoute, protected store: Store) {}

  ngOnInit(): void {
    const payload = {
      params: this.route.snapshot.params,
      queryParams: this.route.snapshot.queryParams
    };
    this.store.dispatch(new UpdateRouteState(payload));
    // 留给子类自定义初始化逻辑
    this.init();
  }

  protected abstract init(): void;
}

子类组件继承基类：

import { Component } from '@angular/core';
import { RouteBaseComponent } from './route-base.component';

@Component({ template: '' })
export class UserComponent extends RouteBaseComponent {
  protected init(): void {
    // 组件自身的初始化逻辑
  }
}

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