如何在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應用程序中使用第二個路由器插座？

回答

相關問題