Angular 2 материал: sidenav переключается с компонента

Я использую Angular 2 Материал 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?

Спасибо за чтение

Ответ 1

Вы хотите объявить ViewChild в своем контроллере, который ссылается на MdSidenav внутри вашего компонента, например:

// 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

Ответ 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();
    }
}

Ответ 3

 <md-sidenav #sidenav class="example-sidenav" opened="false">
    <div class="example-sidenav-content">
      <button type="button" md-button (click)="toogleNav(sidenav)">
        toogle
      </button>
    </div>
 </md-sidenav>

И в ваших ts:

export class AppComponent {

  toogleNav(nav: any) {
    if (nav.opened) {
      nav.close()
    } else {
      nav.open();
    }
  }
}