Angular Material无法使用ViewChild打开特定的sidenav

Question

如果我在main.component中推送所有内容，这是有效的......但这并不好。关于组件是不是Angular？

我可以调用open方法，但是我得到一个没有侧边栏内容的灰色叠加层。它没有嵌套结构，但我想要一个嵌套结构。

BUG - 此设置会打开一个灰色（有些人也拼写此“gray”）叠加层而没有侧边栏。 甚至W3也同意：

回到手头的事情：

main.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { SidenavComponent } from './sidenav.component.ts';
@Component {
    selector: 'app-main-cmp',
    ....
}
export class MainComponent implements OnInit {
    @ViewChild(SidenavComponent) sidenavCmp: SidenavComponent;

    openSidenav(): void {
        this.sidenavCmp.leftSidenav.open(); // 
    }
}

main.component.html //我需要传递任何属性吗？使用EventEmitter，child-＆gt; parent很容易，但是这个很棘手...

<div>
    <app-sidenav></app-sidenav>
</div>

sidenav.component.ts

import { Component, OnInit } from '@angular/core';
import { MdSidenav } from '@angular/material';
@Component({
    selector: 'app-sidenav',
    ...
})
export class SidenavComponent implements OnInit {
    constructor( public leftSidenav: MdSidenav) { }
}

sidenav.component.html //组件内部的.close（）方法工作...，但该组件没有模板

<md-sidenav #leftSidenav (swipeleft)="leftSidenav.close()">
   <h1>TEST</h1>
</md-sidenav>

我可以打开sidenav，但它没有我的内容。

那么有什么关于这个用哈希命名md-sidenav的东西吗？我可以以某种方式从类中访问该hash / sidenav实例吗？