无法路由到子组件Angular答案

【问题标题】：Unable to route to children components Angular无法路由到子组件Angular
【发布时间】：2019-10-30 06:37:05
【问题描述】：

我正在尝试为我的 Angular 应用程序使用多个布局，并按照之前的帖子示例遵循以下指南，但我的子路由似乎不起作用。

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

我的应用路由模块

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' }
];

我如何尝试导航到导航组件中的子组件

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

在我的基础组件 html 中：

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

在我的 app.component.html 中：

<router-outlet></router-outlet>

在我的 index.html 中有

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

我可以很好地路由到非子组件，并且似乎基本组件正在工作，因为我的导航出现在路径''上，但是如果我尝试导航到任何子组件，它似乎会抛出错误：

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

【问题讨论】：

您的 stackblitz 和您的问题不清楚。您可以编辑您的问题以使其更好地理解吗？
请提供错误消息，您进入控制台。或者您正在导航到 pageNotFound 组件？
@varundhariyal，错误消息在帖子底部，（如果我删除导航到 /404）'错误：无法匹配任何路线。 URL 段：“仪表板”
@ng-suhas，我希望没有像“登录”这样的组件的布局和像“仪表板”这样的组件的布局。如果我导航到 /login，我的登录组件显示正常，没有布局。如果我导航到“”，我的基本布局会显示我的导航（这是我想要的），但是我尝试导航到子组件“/dashboard”并且它出错
告诉我在 stackblitz 中重现错误的步骤

标签： angular

【解决方案1】：

请像这样使用儿童路线。不需要传入数据对象

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

【讨论】：

删除数据对象修复了它，但后来让我意识到这是一个语法错误。在声明我的孩子之前，我没有结束数据对象括号。