4

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

<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)，它确实可以工作，但这个 URL 并不是很干净……因为它不能用于面向公众的网站。

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

4

3 回答 3

4

以下对我有用

    {
       path: 'customers', canActivate: [AuthGuard], children: [
       {
          path: '',
          component: CustomersComponent,
          outlet: 'main'
       },
       {
          path: '',
          component: SideBarComponent,
          outlet: 'sideBar'
       }
     ]
    }
于 2017-09-10T07:40:21.433 回答
1

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

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

于 2017-03-05T13:06:44.010 回答
0

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

<a [routerLink]="[{ outlets: { primary: 'payments', aside: null }}]"> Payments</a>
于 2017-03-02T19:14:53.737 回答