无法路由到子组件 Angular

Question

I'm trying to make use of multiple layout's for my angular application and have followed the below guide as per a previous post example but my child routing doesnt seem to work.我正在尝试为我的 angular 应用程序使用多个布局，并按照之前的帖子示例遵循以下指南，但我的子路由似乎不起作用。

Guide I followed: https://stackblitz.com/edit/angular-multi-layout-example我遵循的指南： https://stackblitz.com/edit/angular-multi-layout-example

My app routing module我的应用路由模块

const routes: Routes = [
path: '', component: BaseComponent, canActivate: [AuthGuard], data: {
      title: 'Base Layout', children: [
        { path: '', component: DashboardComponent, data: { title: 'Dashboard' } },
        { path: 'dashboard', component: DashboardComponent, data: { title: 'Dashboard' } }
    }
]

 { path: 'login', component: AuthComponent, data: { title: 'Login' } },
  { path: 'logout', component: AuthLogoutComponent, data: { title: 'Logout' } },

  { path: '404', component: PageNotFoundComponent },
  { path: '**', redirectTo: '/404' }
];

how im trying to navigate to a child component in my navigation component我如何尝试导航到导航组件中的子组件

<a [routerLink]="['/dashboard']" class="list-group-item list-group-item-action bg-light">Dashboard</a>

in my base component html:在我的基本组件 html 中：

<navigation></navigation>
 <router-outlet></router-outlet>

In my app.component.html:在我的 app.component.html 中：

<router-outlet></router-outlet>

In my index.html i have在我的 index.html 我有

<html>
<body>
  <app-root></app-root>
</body>
</html>

I can route to the non-children components fine, and it seems like the base component is working because my navigation appears on path '', but if i try navigate to any child it seems to throw the error:我可以很好地路由到非子组件，并且似乎基本组件正在工作，因为我的导航出现在路径''上，但是如果我尝试导航到任何子组件，它似乎会抛出错误：

Error: Cannot match any routes. URL Segment: 'dashboard'

Answer 1

Please use children route like this.请像这样使用儿童路线。 Don't need to pass in data object不需要传入数据 object

const routes: Routes = [
  { path: '', component: DashboardComponent, children: [
    { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
    { path: 'dashboard', component: DashboardPageComponent },
    { path: 'product', component: ProductManagementComponent },
    { path: 'home', component: HomeComponent }
]}

无法路由到子组件 Angular

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-10-30 07:24:05

无法路由到子组件 Angular

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-10-30 07:24:05

解决方案1
0 已采纳 2019-10-30 07:24:05