为什么儿童路线不是有角度的？

Question

以下是路由模块ts文件的相关代码：

    const routes: Routes = [{
        path: '',
        component: LoginPageComponent
      },
      {
        path: 'dashboard',
        component: DashboardPageComponent
      },
      {
        path: 'dashboard/:id',
        component: DashboardPageComponent,
        children: [{
          path: 'home',
          component: HomeComponent
        }]
      },
      {
        path: '**',
        component: LoginPageComponent
      },
    ];

这是我的仪表板组件：

<app-sidenav></app-sidenav>
<app-bar></app-bar>
<router-outlet></router-outlet>

当我直接导航到仪表板/主页时，HomeComponent不会加载。为什么是这样？

注意：我尝试删除：id。

Answer 1

你的家庭组件的路径是不对的。从:id删除path: 'dashboard/:id'工作正常。

我创建了一个演示here

Answer 2

由于您已在home段中定义了dashboard/id路由，因此无法通过执行/home直接访问dashboard/home，因为此模式将不匹配任何路由定义。

您必须在访问子段dashboard/id路由之前指定父段/home）。所有人一起提到dashboard/someid/home，因为它将尝试匹配整个URL dashboard/someid/home与注册路线定义，并且其中初始dashboard/someid模式将匹配，它将呈现UserDashboardPageComponent后来它试图搜索与/home子路径匹配的剩余模式/home，相应它将有助于在HomeComponent组件的router-outlet内渲染UserDashboardPageComponent

Answer 3

我想补充一点，您可以修复Route Config的一些问题：

const routes: Routes = [{
    path: 'login',
    component: LoginPageComponent
  },
  {
    path: 'dashboard',
    component: DashboardPageComponent,
    children: [{
      path: 'home',
      component: HomeComponent
    }]
  },
  {
    path: '',
    redirectTo: '/login',
    pathMatch: 'full'
  },
  {
    path: '**',
    component: LoginPageComponent
  },
];

此外，您在DashboardPageComponent和/dashboard上加载相同的组件/dashboard/:id。考虑为/dashboard/:id定义一个特定的组件