angular 2 parent sidenavlayout，child sidenav

Question

我正在使用 angular 2 material，我希望 app.component.html 中的 sidenav 布局类似于

<md-sidenav-layout>
<app-navbar></app-navbar>
<router-outlet></router-outlet>
</md-sidenav-layout>

以及外包组件中带有工具栏的侧边导航 navbar.component.html

<div class="navbar">
  <md-sidenav #sidenav mode="side" class="app-sidenav">
    <button md-button (click)="sidenav.toggle()">Overview </button>
    <button md-button>Deploy</button>
  </md-sidenav>

  <md-toolbar color="primary">
    <button class="app-icon-button" (click)="sidenav.toggle()">
      <i class="material-icons app-toolbar-menu">menu</i>
    </button>

    <!-- This fills the remaining space of the current row -->
    <span class="navbar-fill-middle-space"></span>

    <button md-button>Login</button>
  </md-toolbar>
</div>

我目前的问题是，子 html 的侧导航无法识别父 html 的侧导航布局。有没有可能像这样解决它，或者我是否必须将带有切换栏的 sidenav 带入父 html。谢谢指教

Answer 1

我们这样做的方式（请注意 angular2-material 仍处于 alpha 状态，因此它可能不是正确的方式）是，在您的 app.component.html 中执行：

<md-sidenav-layout>
  <md-toolbar color="primary"> ... </md-toolbar>
  <md-sidenav> ... </md-sidenav>
  <div class="sidenav-content">
    <router-outlet></router-outlet>
  </div>
</md-sidenav-layout>

因此，任何属于当前路线的内容都将被注入 sidenav 布局的内容区域。

另请注意，我们已将 <md-toolbar> 放在 <md-sidenav> 元素之前，因此当 sidenav 处于活动状态时，它也会越过工具栏，正如人们对 material-设计的应用程序。

angular 2 parent sidenavlayout，child sidenav

angular 2 sidenavlayout in parent, sidenav in child

angular2-material

angular