Angular 2 – 子模块路由和嵌套

主页

<Top-Navbar></Top-Navbar>
<router-outlet></router-outlet>

子模块页面

<sub-navbar></sub-navbar>
<router-outlet name='sub'></router-outlet>

点击顶部导航栏中的导航,主要路径出口将接收路线.

点击子导航栏时,router-outlet [sub]将分别路由.

HTML很好,诀窍就在于编写app.routIng

app.routIng.ts

const appRoutes: Routes = [
  {
    path: 'login',component: LoginComponent
  },{ path: 'home',component: homeComponent,children: [
      {
        path: 'module1',component: module1Component,children: [
          {
            path: 'submodule11',component: submodule11Component,}
          {
            path: '',redirectTo: 'submodule11',pathMatch: 'full'
          }
        ]
      },{
        path: 'module2',component: module2omponent,children: [
          {
            path: 'submodule21',component: submodule21Component,},{
            path: '',redirectTo: 'submodule21',pathMatch: 'full'
          }
        ]
      }
      ]
      },{
      path: 'about',component: aboutComponent
       }
]

希望它会对你有所帮助.

更多细节https://angular.io/docs/ts/latest/guide/router.html