Angular如何区分用户手动输入URL与代码调用触发的路由路径

Angular 原生支持通过路由守卫结合导航触发来源属性实现该需求，具体操作如下：

实现逻辑 #

Angular 路由的 Navigation 对象自带 trigger 属性，可区分导航触发来源：

• imperative：代表通过代码调用 router.navigate/navigateByUrl 触发的跳转
• popstate/hashchange：代表用户手动修改地址栏、点击浏览器前进/后退按钮触发的跳转

具体步骤 #

1. 新增路由守卫 SourceGuard，代码如下：

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class SourceGuard implements CanActivate {
  constructor(private router: Router) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    const currentNavigation = this.router.getCurrentNavigation();
    // 非代码触发的导航统一跳转到通配符路由
    if (!currentNavigation || currentNavigation.trigger !== 'imperative') {
      return this.router.parseUrl('**');
    }
    // 代码触发的导航正常匹配:id路由
    return true;
  }
}

2. 修改原有路由配置，给 :id 路由绑定守卫：

{
    path: ':id',
    loadChildren: () => import('./test/test.module').then(m => m.TestModule),
    canActivate: [SourceGuard]
  },
  {
    path: '**',
    component: AnyComponent
  }

补充说明 #

如果需要进一步区分「用户手动输入地址」和「浏览器前进/后退操作」，可以额外判断 currentNavigation.previousNavigation 是否为 null：值为 null 代表是首次加载（即用户手动输入地址进入），非空则是历史导航操作。

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