angular - 角度路由、子路由和默认路由

Question

我正在尝试将路由与模块一起使用...

应用程序模块

  {
      path: '',
      component: AppComponent,
      children: [
          { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
          { path: 'dashboard', loadChildren: 'app/dashboard/dashboard.module#DashboardModule'
      ]
  }

使用导入 RouterModule.forRoot(appRoutes)

仪表板.module

  {
      path: '',
      component: DashboardComponent,
      children: [
          { path: '', redirectTo: 'conta', pathMatch: 'full' },
          { path: 'conta', loadChildren: 'app/dashboard/conta/conta.module#ContaModule' }
      ]
  }

使用导入 RouterModule.forChild(dashboardRoutes)

包含模块

  {
      path: '',
      component: ContaComponent,
      children: [
          { path: '', redirectTo: 'list', pathMatch: 'full' },
          { path: 'list', component: ContaListComponent }
      ]
  }

使用 import RouterModule.forChild(contaRoutes)

这个想法是：

• 到应用程序的默认路由是仪表板
• 到仪表板的默认路由是 conta
• conta 的默认路由是 contaList

当我运行此代码时，应用程序正在加载App > Conta > ContaList而不是App > Dashboard > Conta > ContaList我希望。

我的模板（应用程序、仪表板和 Conta）中有一个路由器插座。

我究竟做错了什么？

Answer 1

在仪表板组件中，您需要在 conta 模块中指定与仪表板类似和相同的路径

{
      path: 'dashboard',
      component: DashboardComponent,
      children: [
          { path: '', redirectTo: 'conta', pathMatch: 'full' },
          { path: 'conta', loadChildren: 'app/dashboard/conta/conta.module#ContaModule' }
      ]
  }


{
      path: 'conta',
      component: ContaComponent,
      children: [
          { path: '', redirectTo: 'list', pathMatch: 'full' },
          { path: 'list', component: ContaListComponent }
      ]
  }