一个出口，可实现多路Angular 2

Question

我正在使用AngularJS 2路线。 我有一种布局，其中包含固定的标题，动态边栏和动态内容。 我创建了以下路线：

const appRoutes: Routes = [
  {
    path: '', component: DashboardComponent, children: [
        { path: '', component: HeaderComponent, outlet: 'header' },
        { path: '', component: SidebarComponent, outlet: 'sidebar' },
        { path: '', component: ContentComponent, outlet: 'content' },
        { path: 'profile', component: ProfileComponent, outlet: 'content' }
    ], 
  },
  { path: 'login', component: LoginComponent },
];

当我访问我的主页即http：// localhost /时，它可以正常工作。 目前，我需要的是个人资料页面，只有我的内容出口应该更改，以保持与首页相同的标题和侧边栏内容。 最主要的是，当我访问/ profile页面时，它应该显示相同的标题和侧边栏内容，并且仅内容出口内的内容应该更改并且应该显示我的个人资料内容数据。

我创建了以下routerLink

[routerLink]="['/profile']"

Answer 1

尝试将/ profile作为ContentComponent的子级移动。

const appRoutes: Routes = [{
  path: '', component: DashboardComponent, children: [
    { path: '', component: HeaderComponent, outlet: 'header' },
    { path: '', component: SidebarComponent, outlet: 'sidebar' },
    { path: '', component: ContentComponent, outlet: 'content'
      children: [
        { path: 'profile', component: ProfileComponent }
      ]
    },
  ]},
  { path: 'login', component: LoginComponent },
];

编辑1

也许您可以尝试创建一个LayoutComponent，在其中您可以拥有模板的命名插座和通用插座。

就像是：

const appRoutes: Routes = [
  { path: '', component: LayoutComponent,
    children: [
      { path: '', component: HeaderComponent, outlet: 'header' },
      { path: '', component: SidebarComponent, outlet: 'sidebar' },
      { path: '', component: ContentComponent,
        children: [
          { path: '', component: DashboardComponent }
          { path: 'profile', component: ProfileComponent }
        ]
      },
    ]
  },
  { path: 'login', component: LoginComponent }
];


// LayoutComponent template
<router-outlet name="header"></router-outlet>
<router-outlet name="sidebar"></router-outlet>
<router-outlet></router-outlet>