如何鏈接到Angular 2+中兩個組件的路線？

Question

我的應用程序看起來像（有點簡單）：

<root-component>
  <div id="header>
    <header-component>
      Here are top menu items and some block (cashbox and etc).
      Depend on the route.
      Frequently one header component can be shown on many routes.
    </header-component>
    <right-menu-component>
      Here is right menu (in the right corner). Did not depend on route, always shown.
    </right-menu-component>
  </div>
  <div id="content">
     <content-component>
       Here are all content, business logic. Depend on route.
     </content-component>
  </div>
</root-component>

關於我如何看待解決方案（無效）

const routes: Routes = [
  { path: 'orders', components: 
    [
      {selector: 'header-component', component: 'OrdersHeader'},
      {selector: 'content-component', component: 'OrdersComponent'}
    ]
  },
  { path: 'order-editor', components: 
    [
      {selector: 'header-component', component: 'OrdersHeader'},
      {selector: 'content-component', component: 'OrderEditorComponent'}
    ]
  },
  { path: 'some-report', components: 
    [
      {selector: 'header-component', component: 'ReportsHeader'},
      {selector: 'content-component', component: 'ReportsComponent'}
    ]
  }...

我想將標題和內容組件鏈接到一條路由。 我不能將兩者放在一起，因為它們之間是正確的菜單，並且布局會中斷。

如何解決這個問題呢？

Answer 1

您可以使用命名的插座來彼此獨立地更改標題和內容路由，例如，內容（默認（未命名）插座）和標題中的標題：

<router-outlet name="header"></router-outlet>
                     ^^^^^^

const routes: Routes = [
  { 
    ...
    { path: 'header-a', component: HeaderAComponent, outlet: 'header' },
                                                              ^^^^^^
  }

有關更多信息，請參閱文檔： 在命名插座中顯示多條路線