angular - 如何从子组件打开 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();
}