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"
  }
];

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

<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)时，它确实有效但这个网址并不干净......它不能用于面向公众的网站，因为。

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

Answer 1

以下为我工作

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

Answer 2

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

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

Answer 3

您是否可以尝试使用以下语法导航至PaymentComponent并清除aside插座：

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

页面上的多个路由器插座用于同一路由

3 个答案: