一個出口，可實現多路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>