如何路由到Angular2中的子组件？答案

【问题标题】：How to route to the child components in Angular2?如何路由到Angular2中的子组件？
【发布时间】：2017-08-22 16:04:53
【问题描述】：

我正在尝试为一个项目进行基本设置。以下是我创建的文件：

app.component.html

<div class="jumbotron">
    <div class="container">
        <div class="col-sm-8 col-sm-offset-2">
            <router-outlet></router-outlet>
        </div>
    </div>
</div>

以下是我在 app.routes.ts 文件中的路线

const appRoutes: Routes = [
    { path: 'login', component: LoginComponent },
    {
      path: 'main',
      component: MainComponent,
      children: [
        {
            path: 'main/dashboard',component: DashboardComponent
        },
        {
            path: 'main/user',component: UserComponent
        },
        {
            path: 'main/reports',component: ReportsComponent
        }
      ]
    },

    { path: '**', redirectTo: 'main' }
];

main.component.html

<div id="wrapper">
  <app-top-bar></app-top-bar>
  <router-outlet></router-outlet>
</div>

topbar.component.html

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="navbar-header">
        <a class="navbar-brand">My Admin</a>
    </div>
    <ul class="nav navbar-right top-nav">
        <li>
            <a [routerLink]="['/login']"><i class="fa fa-fw fa-user"></i> Logout</a>
        </li>
    </ul>
  <app-side-bar></app-side-bar>
</nav>

sidebar.component.html

<div class="collapse navbar-collapse navbar-ex1-collapse">
  <ul class="nav navbar-nav side-nav">
    <li [routerLink]="['main/dashboard']" routerLinkActive="active">
        <a><i class="fa fa-fw fa-dashboard"></i> Dashboard</a>
    </li>
    <li [routerLink]="['main/user']" routerLinkActive="active">
        <a ><i class="fa fa-fw fa-bar-chart-o"></i> Users</a>
    </li>
    <li [routerLink]="['main/reports']" routerLinkActive="active">
        <a><i class="fa fa-fw fa-table"></i> Reports</a>
    </li>
  </ul>
</div>

我能够登录并导航到主组件页面，该页面包含一个顶栏、一个侧边栏和一个内容部分，其中将显示侧边栏组件的内容，例如仪表板、用户或报告。

但是，当我尝试单击侧边栏组件（仪表板、用户或报告）时，这些组件未显示在屏幕右侧。我能得到任何帮助吗？

【问题讨论】：

您没有在侧边栏组件中包含<router-outlet></router-outlet>
@Rahul 我已包含在 main.component 中，其中包含顶栏、侧边栏和以显示侧边栏内容。
您已经在main 路由中配置了嵌套子路由。因此，要使用子路由，您需要在侧边栏组件中添加 <router-outlet></router-outlet>
@Rahul 不工作
我想从子路由和侧边栏组件的路由配置中删除 main/ 很好。

标签： angular angular-routing

【解决方案1】：

您好，请从您的子路由配置中删除 main/：

const appRoutes: Routes = [
    { path: 'login', component: LoginComponent },
    {
      path: 'main',
      component: MainComponent,
      children: [
        {
            path: 'dashboard',component: DashboardComponent
        },
        {
            path: 'user',component: UserComponent
        },
        {
            path: 'reports',component: ReportsComponent
        }
      ]
    },

    { path: '**', redirectTo: 'main' }
];

你的其余代码都很好。

【讨论】：

【解决方案2】：

变化：

children: [
        {
            path: 'main/dashboard', component: DashboardComponent
        },
        {
            path: 'main/user', component: UserComponent
        },
        {
            path: 'main/reports', component: ReportsComponent
        }
      ]

收件人：

children: [
        {
            path: 'dashboard', component: DashboardComponent
        },
        {
            path: 'user', component: UserComponent
        },
        {
            path: 'reports', component: ReportsComponent
        }
      ]

否则你的路线需要看起来像 /main/main/dashboard 等才能命中。

【讨论】：