角度2材质:组件的sidenav切换 [英] Angular 2 material : sidenav toggle from component

问题描述

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

I'm using Angular 2 Material sidenav in my project this way:

<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()?

How to call start.toggle() from my component instead of element with click event?

感谢您阅读

推荐答案

您要在控制器中声明一个引用组件内部MdSidenav的ViewChild，如下所示:

You want to declare a ViewChild in your controller that references the MdSidenav inside your component, like this:

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

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

where start is the name of the component you want to reference, in this case the sidenav.

接下来，您可以在该sidenav上调用方法，例如控制器功能内的this.sidenav.toggle().

Next you can call methods on that sidenav, like this.sidenav.toggle() inside your controller's functions.

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

这篇关于角度2材质:组件的sidenav切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！