複数のルートに1つのアウトレット角度2

Question

私はAngularJS 2ルートで作業しています。私は固定ヘッダーと動的サイドバーと動的コンテンツを持つ1つのレイアウトを持っています。私は以下のルートを作成しました：

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/にアクセスするとうまくいきます。私が必要とするのはプロフィールページだけです。私のコンテンツアウトレットは、私のホームページと同じヘッダーとサイドバーの内容を保持するように変更する必要があります。 主なことは/プロファイルページにアクセスするときに、同じヘッダーとサイドバーのコンテンツが表示され、コンテンツコンセントのコンテンツのみが変更され、自分のプロファイルコンテンツデータが表示されるはずです。

私はrouterLink

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

Answer 1

が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 }, 
]; 

EDIT 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>