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

您可以考虑使用命名路由器

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

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

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

详细了解Displaying multiple routes in named outlets here.

选中此Plunker!!

希望这会有所帮助!!

Angular2使用2个Sidebars和路由

1 个答案: