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

Question

我有一个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组件，在“Routeroutlet内容低于”的位置显示“hi”文本，但这不起作用，如果任何人都有一个建议，为什么这不起作用和/或如何解决它我会非常感激。谢谢！

Answer 1

您需要指定希望在哪个路由器插座中显示您的内容。从TypeScript重定向应如下所示：

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

使用锚标记重定向：

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