Angular默认路由解析器问题：切换页面无法重置NgRx Store状态

Angular路由解析器（Resolver）仅在路由对应的组件首次加载时执行。你当前用的嵌套路由结构中，从子路由/root/page返回父路由/root时，父组件PageComponent已经处于激活状态，Angular不会重新触发父路由的defaultResolver，导致Store状态无法重置为默认值。

以下是几种可行的修复方式，按需选择：

1. 用CanActivate守卫替代Resolver #

路由守卫会在每次导航到该路由时触发，刚好解决解析器只执行一次的问题：

步骤1：创建默认状态守卫 #

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

  canActivate(): boolean {
    // 放入原defaultResolver的逻辑，重置Store状态
    this.store.dispatch(setMyValue({ value: false }));
    return true;
  }
}

步骤2：修改路由配置 #

把父路由的resolve替换为canActivate：

const ROOT_PATH = 'root';
const PAGE_PATH = `${ROOT_PATH}/page`;

// ...

bootstrapPageTest({
  routes: [
    {
      path: ROOT_PATH,
      component: PageComponent,
      canActivate: [DefaultStateGuard], // 替换原resolve配置
      children: [
        {
          path: 'page',
          component: PageComponent,
          resolve: {
            'my_resolver': overrideResolver, // 保留子路由的解析器
          },
        },
      ],
    },
  ],
  // 省略其他配置
});

修改后每次导航回/root时，守卫都会执行，自动重置Store状态。

2. 在父组件中监听路由变化 #

如果不想改动路由守卫，可以在PageComponent中监听路由事件，判断当前路由是否回到父路由，触发状态重置：

@Component({ /* 组件配置 */ })
export class PageComponent implements OnInit, OnDestroy {
  private destroy$ = new Subject<void>();

  constructor(private router: Router, private store: Store) {}

  ngOnInit(): void {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd),
      takeUntil(this.destroy$)
    ).subscribe((event: NavigationEnd) => {
      // 判断当前是否回到父路由
      if (event.urlAfterRedirects === `/${ROOT_PATH}`) {
        this.store.dispatch(setMyValue({ value: false }));
      }
    });
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

这种方式不需要修改路由配置，但逻辑耦合在组件内，适合简单场景。

3. 调整为同级路由结构 #

如果嵌套路由不是必须的，可以把POI页面和非POI页面设为同级，这样每次切换路由都会触发对应解析器：

routes: [
  {
    path: ROOT_PATH,
    component: PageComponent,
    resolve: { 'my_resolver': defaultResolver },
  },
  {
    path: PAGE_PATH,
    component: PageComponent,
    resolve: { 'my_resolver': overrideResolver },
  },
]

但这种方式会增加路由配置的重复度，适合页面数量不多的场景。

修改后重新运行测试用例，verifiedNavigate(ROOT_PATH)时会触发状态重置，断言expect(valueFromStore()).toBeFalse()即可通过。

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