角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處於活動狀態時，它也會覆蓋工具欄，正如人們對材質設計應用程序的期望。