一个具有多个组件的路由

Question

问题： 如何为一条路线定义2个组件？

我的网站如下图所示。白框是静态的，永远不会改变，左右框总是根据我走的路线而改变。

http://myapp.com/route

这应该显示route-left.component和route-right.component。而：

http://myapp.com/another

应显示another-left.component和another-right.component。

我一直在寻找解决方案，但是没有运气。我知道路由器会选择第一条路线，并且只会获得该组件。不确定如何做2个组件。我当前的代码是：

Router.module.ts

import { RouteLeftComponent } from '...';
import { RouteRightComponent } from '...';
import { AnotherLeftComponent } from '...';
import { AnotherRightComponent } from '...';
// import Your Canvas View

const appRoutes: Routes = [
    {path: '', redirectTo: '/router', pathMatch: 'full'},
    {path: 'router', component: RouteRightComponent},
    {path: 'router', component: RouteLeftComponent, outlet="sidebar"},
    {path: 'another', component: AnotherRightComponent},
    {path: 'another', component: AnotherLeftComponent, outlet="sidebar"},
]
@NgModule({
    declarations: [
      RouteRightComponent,
      RouteLeftComponent,
      AnotherRightComponent,
      AnotherLeftComponent
    ],
    exports: [ RouterModule ],
    imports: [ RouterModule.forRoot(appRoutes)],
  })
export class RoutingComponent {}

html文件只有：

<router-outlet name="sidebar"></router-outlet>
...
<router-outlet></router-outlet>

为帮助喝彩