Angular4 Material : How to load content to 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 中，它可以俯瞰所有内容，并且无论何时我注入(inject) siteService 组件，我都可以控制它。

我想动态加载内容(类似于 router-outlet 对 router-naviagtion 的作用...

假设我想将 XyComponent1 或 XyComponent2 加载到侧导航，我该如何以编程方式执行此操作？

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>

并且您可以通过传递 socket 名称来控制它:

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

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