同一路由页面上有多个路由器出口

Question

在我的根组件中，我有以下模板：

<main class="main">
  <div class="main__container">
    <div class="main__left-area">
      <router-outlet></router-outlet>
    </div>
    <div class="main__right-area">
      <router-outlet name="aside"></router-outlet>
    </div>
  </div>
</main>

我想为同一路由加载主要router-outlet 中的一些组件和辅助router-outlet 中的一些其他组件（当然，我有几条路线）。因此，我这样定义我的路线：

export const AppRoutes: Routes = [
  {
    path: "",
    component: HomeSummaryComponent
  },  
  {
    path: "",
    component: AskSummaryComponent,
    outlet: "aside"
  },
  {
    path: "payments",
    component: PaymentComponent
  },
  {
    path: "payments",
    component: DataSummaryComponent,
    outlet: "aside"
  }
];

当页面加载时，它运行良好，我在主router-outlet 中有HomeSummaryComponent，在旁边router-outlet 中有AskSummaryComponent。但是，在导航中，我有这个：

<a routerLink="/payments" class="navigation__link">Payments</a></span>

当我点击此链接时，主要router-outlet 的内容被PaymentComponent 替换，但旁边的router-outlet 仍显示AskSummaryComponent。

我还尝试通过“/payements-aside”重命名第二条“付款”路线，并将链接替换为：

<a routerLink="/payments(aside:payments-aside)" class="navigation__link">Payments</a>

但它仍然不起作用。但是，当我直接访问 http://localhost:8083/payments(aside:payments-aside) 时，它确实可以工作，但这个 URL 不是很干净......它不能用于面向公众的网站，因为。

有人知道如何实现这个简单的需求吗？

Answer 1

以下对我有用

    {
       path: 'customers', canActivate: [AuthGuard], children: [
       {
          path: '',
          component: CustomersComponent,
          outlet: 'main'
       },
       {
          path: '',
          component: SideBarComponent,
          outlet: 'sideBar'
       }
     ]
    }

Answer 2

对于那些感兴趣的人，我最终以自己的方式解决了这个问题。我使用了由 Madhu Ranjan in here 描述的 MasterComponent 的实现来制作这个 plunker：http://plnkr.co/edit/NNufpBkvXD6B5S6A8HT4。

长话短说，我使用路由配置来创建每个页面的组合，然后Aggregator 组件使用此配置将组件注入到正确的位置。它本身不是很通用，但我认为它可以改进。

Answer 3

您能否尝试使用以下语法导航到 PaymentComponent 并清除 aside 出口：

<a [routerLink]="[{ outlets: { primary: 'payments', aside: null }}]"> Payments</a>