Angular 2-子模块路由和嵌套的<router-outlet>

我正在寻找针对Angular 2的解决方案，用于以下情况：

在这种情况下，top-nav包含指向加载子模块的链接，sub-nav包含用于更新子模块内容的链接。

网址应映射为：

• / home =>将主页加载到主要组件路由器出口中
• / submodule =>在主组件路由器出口中加载子模块，默认情况下应显示子模块的主页和子导航栏
• / submodule / feature =>将功能加载到子模块的路由器出口内

应用程序模块（和应用程序组件）包含顶部导航栏，可导航到不同的子模块，并且应用程序组件模板看起来像这样

<top-navbar></top-navbar>
<router-outlet></router-outlet>

但这就是复杂性。我需要我的子模块具有类似的布局，并带有第二级导航栏和自己的路由器插座，以加载自己的组件。

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

我尝试了所有选项并进行了无处不在的搜索，但找不到找到具有路由器插座的子模块中具有默认模板（如应用程序组件）的解决方案，并且在不丢失子导航的情况下在内部路由器插座中加载了子模块的内容。

我将不胜感激任何意见或建议

html页面将如下所示。

主页

<top-navbar></top-navbar>
<router-outlet></router-outlet>

子模块页面

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

在顶部导航栏中单击导航时，主要路线出口将分别路线。

单击子导航栏时，路由器出口[sub]将分别路由。

HTML很好，技巧就在于编写app.routing

应用程序路由

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/guide/router

使用：

RouterModule.forChild()
...
<router-outlet name="sub"></router-outlet>
...
[routerLink]="[{ outlets: { sub: [subRouteName] } }]"

完整示例：

的HTML

<div class="tabs tinyscroll">
  <button *ngFor="let tab of tabs"
  [routerLink]="[{ outlets: { sub: [tab.name] } }]"
  routerLinkActive="selected">
    <span>{{ tab.label }}</span>
  </button>
</div>

<section>
  <router-outlet name="sub"></router-outlet>
</section>

app.module.ts

imports: [
...
    RouterModule.forChild([
      {
        path: 'registers',
        component: RegistersComponent,
        children: [
          {path: 'vehicles', component: VehiclesComponent, outlet: 'sub'},
          {path: 'drivers', component: DriversComponent, outlet: 'sub'},
          {path: 'bases', component: BasesComponent, outlet: 'sub'},
          {path: 'lines', component: LinesComponent, outlet: 'sub'},
          {path: 'users', component: UsersComponent, outlet: 'sub'},
          {path: 'config', component: ConfigComponent, outlet: 'sub'},
          {path: 'companies', component: CompaniesComponent, outlet: 'sub'}
        ],
        canActivate: [AuthGuard]
      }
    ]),
...

您必须在路线中提及出口名称，在路由中提及您的路由器出口名称，例如“出口：'sub”

routes: Routes = [
  {path:'', redirectTo: 'login', pathMatch: 'full'},
  {
    path: 'login',
    component: LoginComponent,

  },
  { path: 'home',
    component: AppComponent,
      children: [
        {path: 'home/pdf',component: SideMenuPage,outlet:"sub" },
        {path:'home/addFileUp',component:SidePageAdd,outlet:"sub"},
      ]
   },
];