it-roy-ru.com

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?

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

14
Alex Lévy

Вы хотите объявить 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

15
Alexander Ciesielski

Передайте объект в вашу функцию.

<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();
    }
}
9
Ugnius Malūkas
 <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>

И по твоему тс:

export class AppComponent {

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