javascript - Angular 2 Material : sidenav toggle from component

Question

我在我的项目中以这种方式使用 Angular 2 Material sidenav:

<md-sidenav-layout>
  <md-sidenav #start mode="side" [opened]="true">
      <md-nav-list>
      </md-nav-list>
  </md-sidenav>

  <button md-button (click)="start.toggle()">Close</button>

  <router-outlet></router-outlet>

</md-sidenav-layout>

如何从我的组件调用 start.toggle() 而不是带有点击事件的元素？

感谢阅读

Answer 1

你想在你的 Controller 中声明一个 ViewChild 来引用你组件中的 MdSidenav，像这样:

// Sidemenu
@ViewChild('start') sidenav: MdSidenav;

其中 start 是您要引用的组件的名称，在本例中为 sidenav。

接下来，您可以在该 sidenav 上调用方法，例如在您的 Controller 函数中调用 this.sidenav.toggle()。

https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#parent-to-view-child