角2 sidenavlayout父，sidenav儿童

Question

我与角2的材料工作，我要像

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

在app.component.html的sidenav布局和侧导航蒙山它的工具栏外包组件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的sidnav布局不被chield HTML的sidenav认可。有没有可能像这样解决它，或者我必须带着切换栏sidenav进入父母的HTML。感谢您的咨询

Answer 1

我们做它的方式（和待办事项angular2材料仍处于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处于活动状态时，它也会覆盖工具栏，正如人们对材质设计应用程序的期望。