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

我有一个 angular2 应用程序，我想在其中有 2 个路由器插座。在查看了许多博客和谷歌搜索后，我一直试图让它发挥作用。但它不起作用。任何关于为什么它不起作用的建议，以及我如何让它工作，将不胜感激。

路由模块的相关部分看起来像这样

  {
    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 内容位于下方”，但这不起作用，如果有人有关于为什么这不起作用和/或如何解决它的建议我将不胜感激。谢谢！