Angular 如何放置'；md sidenav'；在'；md工具栏'；

您如何将

md工具栏

放在

md侧导航

的顶部，就像使用material2一样

下面是一个使用角度材料2的

md sidenav

md sidenav

的示例，但它的行为方式与我想要的不同

您将如何修改此示例，使

md-toolbar

保持在

md-sidenav

顶部的方式与中相同

附言

---

有一个类似的问题，但解决方案与angular2 maerial2不兼容。如果我理解了这个问题，这对我来说是可行的。只需将工具栏放在一个单独的元素中（不在sidenav容器中），并从md sidenav容器中删除全屏指令

菜单

只需将工具栏移动到

md sidenav容器中即可

。确保

工具栏

和

路由器出口

位于

flex

div内，方向为

列

。需要一些CSS来调整高度、填充等，并在div

包围
路由器出口
中设置垂直溢出。这将确保在滚动内容时，
工具栏
始终可见

以下内容对我很有用。
（注意：我使用了@angular/flex布局，这使flex布局更容易。如果您愿意，可以将其更改为常规flex css样式）

希望这对你有帮助

<div>
    <md-sidenav-container fxLayout="row" class="app-inner">

        <md-sidenav #nav class="app-sidebar-panel" mode="over" [opened]="false">

            <md-nav-list>
                <md-list-item>
                    <a href="#">Item-1</a>
                </md-list-item>
                <md-list-item>
                    <a href="#">Item-2</a>
                </md-list-item>
                <md-list-item>
                    <a href="#">Item-3</a>
                </md-list-item>
            </md-nav-list>

        </md-sidenav>

        <div fxLayout="column" fxLayoutAlign="start stretch">

            <md-toolbar class="app-toolbar" color="primary">
                <button md-icon-button (click)="nav.open()">
                    <md-icon>menu</md-icon>
                </button>
            </md-toolbar>

            <div class="app-route-content">
                <router-outlet></router-outlet>
            </div>

        </div>

    </md-sidenav-container>
</div>

$app-toolbar-height: 48px !default;
$app-route-content-padding: 0.5rem !default;
$app-sidebar-width: 15.65rem !default;

// Important: This is required to override the
// default padding of md-sidenav-content.

:host /deep/ {
    .md-sidenav-content {
        padding: 0px;
    }
}

.app-inner {
    position: relative;
    width: 100%;
    max-width: 100%;
    height: 100vh;
    min-height: 100vh;
}

md-sidenav.app-sidebar-panel {
    overflow-x: hidden;
    width: $app-sidebar-width;
    box-shadow: 3px 0px 6px rgba(0, 0, 0, 0.3) !important;
}

md-toolbar {
    min-height: $app-toolbar-height !important;
    md-toolbar-row {
        min-height: $app-toolbar-height !important;
        height: $app-toolbar-height !important;
    }
    &.main-header {
        position: relative;
        box-shadow: 0 1px 8px rgba(0, 0, 0, .3);
        z-index: 1;
    }
}

.app-toolbar {
    position: relative;
    box-shadow: 0 1px 8px rgba(0, 0, 0, .3);
}

.app-route-content {
    overflow-y: scroll;
    padding: #{$app-route-content-padding} !important;
    height: calc(100vh - #{$app-toolbar-height} - #{$app-route-content-padding} * 2);
}