Angular中如何在Resolver中区分不同父路由路径？

我完全懂你的困扰——两个不同的根路由（path1和path2）都指向同一个懒加载模块，模块里的默认组件依赖MyModule2Resolver获取数据，但现在想根据进入的父路径执行不同逻辑，却发现从ActivatedRoute里拿不到上层的路由信息对吧？

别担心，这里有几个可行的解决方案：

方案1：通过路由状态的完整URL判断 #

最简单的方式就是利用RouterStateSnapshot里的完整URL，直接判断是从哪个路径进来的。在你的Resolver里直接读取state.url即可：

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

@Injectable()
export class MyModule2Resolver implements Resolve<any> {
  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {
    // 获取当前页面的完整URL
    const incomingUrl = state.url;
    
    if (incomingUrl.startsWith('/path1')) {
      // 执行path1对应的业务逻辑
      console.log('处理来自path1的请求');
    } else if (incomingUrl.startsWith('/path2')) {
      // 执行path2对应的业务逻辑
      console.log('处理来自path2的请求');
    }

    // 这里返回你的数据逻辑，比如调用API获取数据
    return this.yourDataService.fetchData(/* 可根据路径传不同参数 */);
  }
}

这种方式的好处是不用修改现有路由配置，快速生效。

方案2：给父路由添加自定义Data属性（更优雅） #

如果不想依赖URL字符串判断，你可以在根路由配置里给path1和path2添加自定义的data属性，然后在Resolver里遍历路由快照的父节点拿到这个标记：

首先修改app.routing的配置：

const APP_ROUTES: Routes = [
  { path: '', canActivate: [LoggedInGuard], children: [
    {path: '', redirectTo: '/path1', pathMatch: 'full'},
    {path: 'path1', loadChildren: 'app/myModule.module#MyModuleModule', data: {sourceRoute: 'path1'}},
    {path: 'path2', loadChildren: 'app/myModule.module#MyModuleModule', data: {sourceRoute: 'path2'}}
  ] },
  {path: '**', redirectTo: ''}
];

然后在Resolver里遍历路由快照的父层级，找到带有sourceRoute的节点：

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

@Injectable()
export class MyModule2Resolver implements Resolve<any> {
  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {
    let currentRoute = route.parent;
    let sourceRoute: string | null = null;

    // 向上遍历路由快照，找到我们标记的sourceRoute
    while (currentRoute) {
      if (currentRoute.data?.sourceRoute) {
        sourceRoute = currentRoute.data.sourceRoute;
        break;
      }
      currentRoute = currentRoute.parent;
    }

    if (sourceRoute === 'path1') {
      // path1专属逻辑
    } else if (sourceRoute === 'path2') {
      // path2专属逻辑
    }

    // 返回数据
    return this.yourDataService.getDataBasedOnSource(sourceRoute);
  }
}

这种方式更健壮，即使以后URL路径调整，只要修改data属性或者判断逻辑就可以，不用改字符串匹配的部分。

为什么之前拿不到父路径信息？ #

因为你的模块是懒加载的，ActivatedRouteSnapshot默认指向的是模块内部的路由节点，而path1/path2属于上层的根路由节点，所以需要通过遍历父节点或者直接取完整路由状态的URL来获取上层信息。

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