如何从子组件中打开MdSidenav？

Question

我正在使用angular-material2库中的MdSidenav组件，并且希望从另一个组件打开MdSidenav。因此，我想从另一个组件(即子组件)中使用局部变量#sidenav (即父组件中的)的函数。

父组件：src/app/app.component.html

<md-sidenav-container>
 <md-sidenav #sidenav>
  <h1>Hello</h1>
 </md-sidenav>

 <div class="my-content">
  <router-outlet></router-outlet>
 </div>
</md-sidenav-container>

子组件：src/app/menu/menu.component.html

<div class="menu">
 <button (click)="sidenav.open()"></button>
</div>

Answer 1

我也有过类似的情况。你可以这样做：

<md-sidenav-container>
  <md-sidenav #sidenav>
     <h1>Hello</h1>
  </md-sidenav>

  <menu [nav]="sidenav"></menu>
</md-sidenav-container>

然后在菜单组件中：

@Input() nav;

openSideNav(){
   this.nav.open();
}