Angular2 使用 2 个带有路由的侧边栏

Question

如果我有两个带有内容的侧边栏，如果它们在同一层次结构但不在同一元素中，我该如何使用路由？

我想我不能为两个边栏使用另一个 <router-outlet>，因为它们不一样，不应该显示相同的内容
我不知道我应该如何让它工作。

我只想在左侧有一个侧边栏，其中包含一个显示内容 A 的容器，在右侧边栏上有一个显示内容 B 的容器

这是我的 app.routing.ts 文件

const APP_ROUTES: Routes = [
    { path: '', redirectTo: '/Roulette', pathMatch: 'full' },
    { path: 'Roulette', component: RouletteComponent },
    { path: 'Jackpot', component: JackpotComponent },
    { path: 'Dice', component: DiceComponent },
    { path: 'Crash', component: CrashComponent },
    { path: 'Bingo', component: BingoComponent },
    { path: 'Chat', component: ChatComponent },
    { path: 'Account', component: AccountComponent }
]

Answer 1

你可以考虑使用 named router-outlet

<router-outlet name="awesome" ></router-outlet>

并在路线中使用它，如下所示，

{
  path: 'Chat',
  component: ChatComponent,
  outlet: 'awesome'
}

阅读更多关于 Displaying multiple routes in named outlets here.

勾选这个Plunker!!

希望对您有所帮助！！

Angular2 使用 2 个带有路由的侧边栏

Angular2 use 2 Sidebars with routing

routing

sidebar

angular2-routing

angular