为什么子路线不以角度工作？答案

【问题标题】：Why isn't the child route working in angular?为什么子路线不以角度工作？
【发布时间】：2018-09-02 10:03:13
【问题描述】：

这里是路由模块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。

【问题讨论】：

你可能已经尝试过删除id:，但你必须删除它。
好吧...我删除了:id。没有帮助
提示：在Router Module.forRoot(routes, options)开启追踪

标签： angular

【解决方案1】：

由于您在dashboard/id 段内定义了home 路由，因此您不能通过dashboard/home 直接访问/home，因为此模式不会匹配任何路由定义。

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

【讨论】：

你能改写一下吗...我不明白。我的父段是仪表板，我希望子段是主页。
@ParthAgarwal 我做了改写，让我知道现在是否有意义。 :) 谢谢 :) 这符合我的建议吗？

【解决方案2】：

您的 home 组件路径不正确。从path: 'dashboard/:id' 中删除:id 工作正常。

我已经创建了一个演示 here

【讨论】：

【解决方案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
  },
];

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

【讨论】：

但我希望登录组件在空白路由上加载
它会的。你最终设置了一条catch all route。
但那是无效或 404 路由。应用启动，首先加载的是登录组件。无论如何，我试图摆脱你的要求。没有什么不同。主页组件不会加载到仪表板/主页上。
但是你为什么把LoginComponent放在**中呢？为什么/dashboard 和/dashboard/:id 上的组件相同？
我把登录组件也放在了**中，因为我想让登录作为404。如果没有找到页面，你去登录。