angular - 一个具有多个组件的路由

Question

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

我的网站如下图所示。白盒子是静态的，永远不会改变，左边和右边的盒子总是根据我去的路线而变化。

http://myapp.com/route

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

http://myapp.com/another

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

我一直在努力寻找解决方案，但没有运气。我知道路由器选择了第一条路由并且只得到了那个组件。不知道如何做 2 个组件。我目前的代码是：

路由器模块.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>

欢呼帮助

标签： angularroutingroutes