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

我有一个angular2应用程序，我想有2个路由器插座。在看过很多博客和谷歌搜索之后，我一直试图让它起作用。但它不起作用。任何建议，为什么它不工作，以及如何让它工作，将不胜感激。如何在angular2应用程序中使用第二个路由器插座？

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

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

我有一个模板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相关的功能看起来像这样一些HTML

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

组件Booking_com的html看起来像这样

<p>hi</p>

实际相关的用户界面看起来像这样

当你在用户界面上，我要点击红色按钮，并有文字“喜”下面出现的地方说：“Routeroutlet内容低于“通过路由到Booking_com组件，但这是行不通的，如果有人建议为什么这不起作用和/或如何解决它，我会非常感激。谢谢！

来源

2017-05-27 Dan

发布您的代码作为文本，而不是图像。 –

好的，抱歉，等一下。 – Dan

另外，解释你想要达到的目标。 –

您需要指定您希望在哪个路由器插座上显示您的内容。从打字稿重定向应该是这样的：

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

使用锚标记重定向：

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

来源

2017-05-27 14:02:52

感谢您的建议，但是当将代码更改为此选项this.router.navigate（[“/ booking”]，{outlets：{bookingRouter：[ '预订']）; – Dan

我收到一个错误，说错误类型'{outlets：{bookingRouter：string; }; }'不能分配给'NavigationExtras'类型的参数。对象字面量可能只指定已知属性，而类型为'NavigationExtras'的'outlets'不存在。 – Dan

@丹看看这个链接https://angular.io/docs/ts/latest/guide/router.html并参阅里程碑4讨论辅助路由器插座。 –

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

回答

相关问题