如何在angular2应用中使用第二个路由器插座？

Question

我有一个angular2应用，其中我想要2个路由器插座。 在查看了许多博客和Google搜索之后，我一直试图使它起作用。 但这是行不通的。 对于为什么它不起作用以及如何使它起作用的任何建议将不胜感激。

路由模块的相关部分如下所示

  {
    path:"booking",
    component:Booking_com,
    outlet:"bookingRouter"
  },

我在模板home.html中有一些html

<div id="footer">
    <!--<p>Routeroutlet content goes below</p>-->
    <router-outlet name="bookingRouter"></router-outlet>
    <button class="bookingButton" md-fab id="fab"(click)="openBookings()"><img src="../../assets/icons/suitcase.png" id="bookingImage" class="icon"></button>
</div>

home.component.html中的相关函数如下所示

  openBookings(){
    this.router.navigate( ["/booking"] );
  }

组件Booking_com的html看起来像这样

<p>hi</p>

实际相关的用户界面如下所示

当您查看用户界面时，我想单击红色按钮，并通过路由到Booking_com组件在文本“ hi”下方显示“ Routeroutlet内容在下面”，但这不起作用，并且如果有人使用关于为什么不起作用和/或如何解决它的建议，我将不胜感激。 谢谢！

Answer 1

您需要指定要显示内容的路由器出口。 从TypeScript重定向应如下所示：

openBookings(){
    this.router.navigate( ["/booking"], { outlets: { bookingRouter: ['booking'] );
}

使用定位标记重定向：

<a [routerOutlet]="[{ outlets: { bookingRouter: ['booking']}}]">To Booking</a>