Angular4材質：如何將內容加載到sidenav

Question

所以我把我的sidenav放在了app.component中，就像這樣：

<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，我都可以對其進行控制。

我想動態加載內容（類似於router-out對router-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>

您還需要定義路線的組件。 該指南摘錄了有關使用輔助路線的更多詳細信息。