角度2材质:侧面切换来自组件

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()使用click事件从我的组件调用而不是元素？

谢谢你的阅读

Answer 1

您想ViewChild在控制器中声明引用MdSidenav组件内部的a,如下所示:

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

start您要引用的组件的名称在哪里,在本例中为sidenav.

接下来,您可以在sidenav上调用方法,例如this.sidenav.toggle()在控制器的函数内部.

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

Answer 2

将对象传递给您的函数.

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

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

  <router-outlet></router-outlet>

</md-sidenav-layout>

import {Component} from '@angular/core';

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html'
})
export class AppComponent {
    constructor() {
    }

    randomName(start: any) {
        start.toggle();
    }
}