Angular4材料：如何加載內容sidenav

Question

所以我已經把我的app.component sidenav，是這樣的：

<md-sidenav-container fullscreen> 
    <md-sidenav #sidepanel>...</md-sidenav> 
    <div class="app"> 
    <main> 
     <router-outlet></router-outlet> 
    </main> 
    </div> 
</md-sidenav-container> 

現在

，我已經把參考sidenav我siteService是俯瞰一切而且我可以在組件注入siteService時控制它。

我想裏面加載內容上飛（類似於路由器出口與路由器naviagtion呢......

比方說，我想XyComponent1或XyComponent2加載到sidenav，我會怎樣做到這一點編程

Answer 1

您可以使用輔助路線做到這一點：？

<md-sidenav-container fullscreen> 
    <md-sidenav> 
    <router-outlet name="sidenav"></router-outlet> 
    </md-sidenav> 
    <div class="app"> 
    <main> 
     <router-outlet></router-outlet> 
    </main> 
    </div> 
</md-sidenav-container> 

而且你可以通過出口名稱控制它：

<a [routerLink]="[{ outlets: { 'sidenav': ['sidenav-component1'] } }]"> 
    Click to apply new sidenav. 
</a> 

您還需要定義路由的組件。 This guide是關於使用輔助路由的更多細節的一個很好的摘錄。