Angular 2：如何让router.navigate触发canDeactivate钩子

这个问题我之前在项目里也碰到过——Angular路由器默认会跳过相同URI的导航操作，所以canDeactivate守卫自然不会被触发。不过有几个实用的办法可以解决这个问题，根据你的场景选就行：

1. 全局配置onSameUrlNavigation为'reload' #

这是最直接的全局方案，修改路由配置后，所有相同URL的导航都会触发完整的路由生命周期，包括canDeactivate守卫。

在你的AppRoutingModule里更新配置：

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      onSameUrlNavigation: 'reload', // 核心配置
      enableTracing: false // 可选，开启后可在控制台查看路由调试信息
    })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

设置完成后，每次调用router.navigate到当前页面URI时，都会先触发canDeactivate守卫，之后组件会重新初始化。

2. 手动触发守卫+强制组件刷新 #

如果不想全局修改路由规则，可以手动调用canDeactivate逻辑，再临时修改路由重用策略来强制刷新组件。

示例代码如下：

import { Component } from '@angular/core';
import { Router, ActivatedRoute, RouteReuseStrategy } from '@angular/router';
import { YourCanDeactivateGuard } from './your-can-deactivate.guard';

@Component({
  selector: 'app-target-component',
  templateUrl: './target-component.component.html'
})
export class TargetComponent {

  constructor(
    private router: Router,
    private route: ActivatedRoute,
    private deactivateGuard: YourCanDeactivateGuard,
    private routeReuseStrategy: RouteReuseStrategy
  ) { }

  navigateToSameUri() {
    // 先调用canDeactivate守卫判断是否允许导航
    this.deactivateGuard.canDeactivate(this).subscribe(allow => {
      if (allow) {
        // 临时修改路由重用策略，让路由器认为当前路由不需要重用
        const originalReuseStrategy = this.routeReuseStrategy.shouldReuseRoute;
        this.routeReuseStrategy.shouldReuseRoute = () => false;

        // 导航到当前URI
        this.router.navigate([this.route.snapshot.url], {
          onSameUrlNavigation: 'reload'
        }).then(() => {
          // 恢复原有的路由重用策略
          this.routeReuseStrategy.shouldReuseRoute = originalReuseStrategy;
        });
      }
    });
  }
}

3. 添加随机查询参数（简单但会修改URL） #

如果对URL的小改动不敏感，可以在导航时添加一个随机参数（比如时间戳），让路由器认为是新的导航请求，从而触发canDeactivate。

示例代码：

this.router.navigate([], {
  queryParams: { refreshToken: Date.now() }, // 添加随机时间戳
  queryParamsHandling: 'merge' // 保留原有查询参数（可选）
});

这个方法实现最简单，但地址栏会多一个额外参数，适合对URL美观要求不高的场景。

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