多个路线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>