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-outlet 对 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>

您还需要定义路由的组件。 This guide 是有关使用辅助路由的更多详细信息的精彩摘录。