Angular 4懒加载路由下相对导航至同级路由的问题咨询

先帮你梳理下核心的路由层级结构，这是理解两个问题的关键（假设Details、prodType等是具体路径字符串，比如'details'、'prod-type'）：

- /details（app-routing中的懒加载路由，对应DetailsModule）
  - /（DetailsModule中的空路径路由，对应DetailsComponent）
    - /prod-type（DetailsComponent的子路由，懒加载ProdTypeModule）
      - /（ProdTypeModule中的空路径路由，对应ProdTypeComponent）
    - /cus-details（DetailsComponent的子路由，懒加载CusDetailsModule）
      - /（CusDetailsModule中的空路径路由，对应CusDetailsComponent）
    - /emp-details（DetailsComponent的子路由，懒加载EmpDetailsModule）
      - /（EmpDetailsModule中的空路径路由，对应EmpDetailsComponent）

问题1：为什么currentRoute返回Details而非prodType？ #

你在DetailsComponent中用this.activatedRoute.snapshot.url[0].path拿到Details，核心原因是**ActivatedRoute是和当前组件绑定的**：

• DetailsComponent对应的路由节点是/details/（也就是DetailsModule里的path: ''路由），这个节点的父路由才是/details。
• 而prodType是这个节点的子路由，对应/details/prod-type/节点（往下还有ProdTypeModule的空路径节点）。

你当前的activatedRoute指向的是/details/这个节点，它的url数组其实是空的（因为路径是''）——你能拿到Details大概率是误取了父路由的路径（比如this.activatedRoute.parent?.snapshot.url[0].path）。如果想获取当前激活的子路由（比如prodType），应该访问当前路由的firstChild：

const childPath = this.activatedRoute.firstChild?.snapshot.url[0].path;
// 此时childPath才是'prod-type'

至于导航时用['CusDetails']而非['../CusDetails']才能成功，逻辑也和路由节点有关：

• 你的this.route是DetailsComponent对应的/details/节点，CusDetails是这个节点的直接子路由，所以相对路径直接写['CusDetails']就会导航到/details/cus-details/，符合预期。
• 如果用['../CusDetails']，../会让你回到父节点/details，然后添加CusDetails就变成/CusDetails，这显然不是你要的路径，所以会失败。

问题2：为什么单个../无法跳转到同级EmpDetails？ #

当你处于CusDetails路由时，当前激活的组件是CusDetailsComponent，它对应的路由节点是/details/cus-details/（CusDetailsModule里的path: ''路由）。此时：

• 用['../EmpDetails']时，相对路径基于/details/cus-details/这个节点：
  • ../会导航到它的父节点/details/cus-details（也就是DetailsComponent的子路由节点），然后加上EmpDetails就变成/details/cus-details/EmpDetails，这显然不是你要的同级路由，所以无法正常跳转。
• 而用['../../EmpDetails']时：
  • 第一个../到/details/cus-details，第二个../到/details/（DetailsComponent对应的节点），然后加上EmpDetails就正确导航到/details/emp-details/，也就是同级路由。

简单来说，每个懒加载子模块里的path: ''路由都会在路由树中多一层节点，这导致你需要多退一级才能回到真正的父级路由节点。

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