Question

AppRoutingModule

const routes: Routes = [
   { path: '', loadChildren: './home/home.module#HomeModule' },
   { path: 'admin', loadChildren: './admin/admin.module#AdminModule' }
];

HomeRoutingModule

const routes: Routes = [
  {path: '', component: HomeComponent, children: [
    {path: 'inner', loadChildren: './home-inner/home-
inner.module#HomeInnerModule'},
  ]}
];

HomeInnerRoutingModule

const routes: Routes = [
  {path: '', component: HomeInnerComponent}
];

链接到简单的github示例https://github.com/NazarKalytiuk/lazyRoutingAngular 你可以在这里试试：https://stackblitz.com/github/NazarKalytiuk/lazyRoutingAngular

请点击内部两次并查看控制台。第二次路线将进入内部/（内部）。和其他路线一样。

如何解决这个问题？

Answer 1

在home.component.html中定义绝对路径，而不是目标网址的相对路径

<a routerLink="/inner">Inner</a>
<router-outlet></router-outlet>

来自文档RouterLinks：

第一个分段名称可以加上/，。/或../:



如果第一个段以/开头，路由器将从应用程序的根目录中查找路径。



如果第一段以./开头，或者没有以斜线开头，则路由器会查找当前激活路线的子节点。



如果第一段以../开头，路由器将上升一级。

如何修复相对子路径Angular

1 个答案: