小编Pra*_*odh的帖子

我正在使用Angular 2材料创建一个应用程序,并且我正在尝试在md-sidenav-layout部分添加一个材质菜单.但是,菜单的触发器显示在页面的不同部分.

app.component.ts-我的主要组件是bootstrapped

    @Component({
        selector: 'app-root',
        template: `
        <navbar></navbar>
        <sidenav #tests></sidenav>
        `
    })

sidenav.component.ts- sidenav组件.我指的是https://github.com/angular/material2/blob/master/src/lib/menu/README.md 来创建菜单.

    @Component({
        selector: 'sidenav',
        template: `
            <md-sidenav-layout>
                <md-sidenav #start  [opened]="sidenavStatus()" (close)="reset()">
                    <md-card>
                        <p class="profile-name">Username</p>
                    </md-card>

                    <md-list class="sidenav-list">
                        <md-list-item> Add Steps </md-list-item>
                        <md-list-item> Add Sections </md-list-item>
                        <md-list-item> Add Fields </md-list-item>
                    </md-list>
                    <br>               
                </md-sidenav>

                //the actual content in the page
                <md-menu #menu="mdMenu">
                    <button md-menu-item> Refresh </button>
                    <button md-menu-item> Settings </button>
                    <button md-menu-item> Help </button>
                    <button md-menu-item disabled> Sign Out </button>
                </md-menu>
                <md-card class="step-card">
                    <md-card-title>Card with …