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

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>

当我点击这个 link 时，主 router-outlet 的内容被 PaymentComponent 替换，但旁边的 router-outlet 仍然显示 AskSummaryComponent .

我还尝试通过“/payements-aside”重命名第二条 "payments" 路线，并将 link 替换为：

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

但是还是不行。但是，当我直接访问 http://localhost:8083/payments(aside:payments-aside) 时，它确实有效，但是这个 URL 并不是很干净...它不能用于面向 public 的网站，因为。

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

Answer 1

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

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

Answer 2

对于那些感兴趣的人，我终于用自己的方式解决了这个问题。我使用了 Madhu Ranjan to make this plunker: http://plnkr.co/edit/NNufpBkvXD6B5S6A8HT4.

描述的 MasterComponent 的实现

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

Answer 3

以下对我有用

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

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

Multiple router-outlet on the page for the same route

angular

router-outlet