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

您可以使用命名插座相互独立地更改标题和内容路由，例如内容作为指定出口的默认（未命名）出口和标题：

justify-self

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

有关详细信息，请参阅文档：Displaying multiple routes in named outlets

如何链接到Angular 2+中两个组件的路径？

1 个答案: