Angular 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?

感谢阅读

推荐答案

你想在你的控制器中声明一个 ViewChild 来引用你的组件内的 MdSidenav，就像这样:

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

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