Angular4 material：如何将内容加载到 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 是有关使用辅助路由的更多详细信息的精彩摘录。

Angular4 material：如何将内容加载到 sidenav

Angular4 material: How to load content to sidenav

angular-material2

angular