如何在URL查询参数变化时派发NGRX Action？

针对你遇到的URL参数变化触发数据加载的问题，结合Angular 5和ngrx 4的环境，我推荐两种更可靠的方案，能完美解决你之前几种方法的痛点：

方案一：基于ROUTER_NAVIGATED的@Effect（推荐，符合ngrx最佳实践） #

你之前尝试的ROUTER_NAVIGATION是导航开始时触发的，确实可能被路由守卫拦截导致无效Action。而ROUTER_NAVIGATED是导航成功完成后才会派发的Action，完美避开了守卫拦截的问题。

实现步骤：

1. 确保你已经正确集成了@ngrx/router-store（将StoreRouterConnectingModule导入到AppModule）
2. 编写Effect监听ROUTER_NAVIGATED，判断目标路径是否为/documents，然后解析queryParams派发加载Action：

import { Effect, Actions } from '@ngrx/effects';
import { ROUTER_NAVIGATED, RouterNavigatedAction } from '@ngrx/router-store';
import { LoadDocuments } from './documents.actions';
import { ofType, map, filter } from 'rxjs/operators';

@Injectable()
export class DocumentsEffects {
  @Effect()
  loadDocumentsOnNavigation$ = this.actions$.pipe(
    ofType<RouterNavigatedAction>(ROUTER_NAVIGATED),
    filter(action => action.payload.routerState.url.startsWith('/documents')),
    map(action => {
      const queryParams = action.payload.routerState.root.queryParams;
      return new LoadDocuments({
        startDate: queryParams.startdate,
        endDate: queryParams.enddate
      });
    })
  );

  constructor(private actions$: Actions) {}
}

这个方案的优势：

• 只在导航成功后触发，避免无效的加载请求
• 完全基于ngrx生态，逻辑集中在Effects里，组件无需处理路由监听
• 自动响应浏览器后退/前进的URL参数变化

方案二：组件内监听路由参数变化（适合简单场景） #

如果你的DocumentsComponent是直接绑定到/documents路径的，也可以在组件内监听ActivatedRoute的queryParams变化，然后直接派发Action：

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Store } from '@ngrx/store';
import { LoadDocuments } from './documents.actions';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app-documents',
  template: '<app-documents-list></app-documents-list>'
})
export class DocumentsComponent implements OnInit, OnDestroy {
  private queryParamsSub: Subscription;

  constructor(
    private route: ActivatedRoute,
    private store: Store<any>
  ) {}

  ngOnInit() {
    this.queryParamsSub = this.route.queryParams.subscribe(params => {
      this.store.dispatch(new LoadDocuments({
        startDate: params.startdate,
        endDate: params.enddate
      }));
    });
  }

  ngOnDestroy() {
    this.queryParamsSub.unsubscribe();
  }
}

这个方案的优势是简单直接，适合小型应用或不需要全局路由监听的场景，但需要注意手动管理订阅避免内存泄漏。

为什么你的之前的方法有问题？ #

• 方案1（绑定navigationend）：虽然可行，但需要自己解析URL路径和参数，不如用router-store提供的结构化路由状态方便，而且和ngrx生态的集成度更低。
• 方案2（ROUTER_NAVIGATION）：如你所说，这个Action在导航开始时触发，此时路由守卫还没完成校验，可能会导致导航失败但Action已经派发的情况。
• 方案3（canActivate）：Angular的路由守卫canActivate只会在路由路径变化时触发，URL参数变化属于同一路由的更新，不会再次调用守卫，所以这个方法确实无效。

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