Angular2 子模块的 forChild() 路由覆盖根路由



当使用loadchildren()呼叫导入子路由时,我面临着覆盖根路由的问题。

App路由被声明为:

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 {}

我可以获取/自己,/嵌套/page1,/nested/page2,但是当我尝试获得root/- 我将重定向到/page1时。为什么会发生这种情况,因为它在用Routermodule中在子模块中声明。Forchild,它如何重定向到/拥有?

我已经为repro创建了简单的plunk -https://plnkr.co/edit/8fe7c5jyiqjrzzvccxxb?p=preview

有人经历了这种行为吗?

这是您的分叉和修改的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 }
    ]
  },
];

我们需要一些帽子"不要导入懒惰的已加载模块":)

解决了我的方法问题,在一个相关问题中解释了:https://stackoverflow.com/a/45718262/885259

谢谢!

最新更新