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

Question

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

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

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

我在模板中有一些 html home.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 content goes below" 下方，但这不起作用，如果有人对为什么它不起作用有建议 and/or 如何修复它，我将不胜感激。谢谢！

Answer 1

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

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

使用锚标记重定向：

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

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

How to use a second router-outlet in angular2 app?

angular-routing

angular