угловой 2 sidenavlayout в родителю, sidenav в детстве

Question

Я работаю с угловым 2 материала, и я хочу, чтобы макет sidenav в app.component.html как

<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> 

Моя задача на данный момент, что sidnav расположение родительского HTML не распознается sidenav в chield HTML. Есть ли возможность решить это так или я должен взять sidenav с помощью переключателя в родительский html. Спасибо советы

Answer 1

, как мы сделали это (и делать заметки angular2-материал еще на стадии альфа, поэтому он не может быть правильным способом), на ваш 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, она также будет проходить через панель инструментов, как и следовало ожидать от приложения, предназначенного для материалов.