angular2アプリで2番目のルータコンセントを使用するにはどうすればいいですか？

Question

私は2つのルーターアウトレットを持っていたいと思うangle2アプリを持っています。私は多くのブログやGoogleの検索を見て、これを動作させるよう努めてきました。しかし、それは動作していません。なぜそれが動作していないか、どのように私がそれを動作させることができるかについてのどんな提案も非常に高く評価されるでしょう。

ルーティングモジュールの関連部分は、私は、テンプレート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の関連する機能は、このようになります持っているこの

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

のように見えます

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

コンポーネントBooking_comのhtmlは次のようになります

<p>hi</p> 

実際、関連するユーザーインターフェースは、ユーザーインターフェイスを見ると、私は赤いボタンをクリックすると、テキストは「こんにちは」それは「Routeroutlet言うところの下に表示されている場合は、この

のように見えますコンテンツがBooking_comコンポーネントにルーティングされることでコンテンツが「下に行きますが、これは機能しません。なぜ誰かがこれがうまくいかない理由や修正方法を提案したら、私は非常に感謝しています。ありがとう！

Answer 1

コンテンツを表示するルータのアウトレットを指定する必要があります。アンカータグを使用してリダイレクト

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

：活字体からリダイレクトするようになっているはず

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