Question

当使用loadChildren（）调用导入子路由时，我遇到了覆盖根路由的问题。

申请路线声明为：

const routes: Routes = [
  { path: '', redirectTo: 'own', pathMatch: 'full' },
  { path: 'own', component: OwnComponent },
  { path: 'nested', loadChildren: () => NestedModule},
];
export const routing = RouterModule.forRoot(routes);

嵌套子模块的路由：

const routes: Routes = [
  { path: 'page1', component: NestedPage1Component },
  { path: 'page2', component: NestedPage2Component },
  { path: '', redirectTo: 'page1', pathMatch: 'full' },
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class Module1RoutingModule {}

我可以获得/拥有，/ nested / page1，/ nested / page2，但是当我尝试获取root /时，我正在重定向到/ page1。为什么会发生这种情况，因为它在带有RouterModule.forChild的子模块中声明，它如何重定向到/拥有？

我为repro创建了简单的插件 - https://plnkr.co/edit/8FE7C5JyiqjRZZvCCxXB?p=preview

有人经历过这种行为吗？

Answer 1

这是你的分叉和修改的plunker：https://plnkr.co/edit/XilkY55WXle2hFF0Pelx?p=preview

请勿导入该延迟加载模块并更改如下所示的根路由：

//import { Module1Module } from "./module1/module1.module"; // do NOT import it !

export const routes: Routes = [
  { path: '', redirectTo: 'own', pathMatch: 'full' },
  { path: 'own', component: OwnComponent },
  { path: 'module1', loadChildren: 'src/module1/module1.module#Module1Module' },
];

嵌套路线：

const routes: Routes = [
  //{ path: 'page1', component: Module1Page1Component },
  //{ path: 'page2', component: Module1Page2Component },
  //{ path: '', redirectTo: 'page1', pathMatch: 'full' },

  // do the routes like this..
  {
    path: '',
    component: Module1Component,
    children: [
      { path: '', redirectTo: 'page1', pathMatch: 'full' },
      { path: 'page1', component: Module1Page1Component },
      { path: 'page2', component: Module1Page2Component }
    ]
  },
];

Answer 2

我们需要一些关于“不要进口懒人模块”的CAPS：）

这解决了我的方法问题，在相关问题中解释：https://stackoverflow.com/a/45718262/885259

谢谢！

Angular2子模块的forChild（）路由覆盖根路由

2 个答案: