web-dev-qa-db-fra.com

Matière angulaire 2: bascule sidenav du composant

J'utilise Angular 2 Material sidenav dans mon projet de cette façon:

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

Comment appeler start.toggle() à partir de mon composant au lieu d'un élément avec un événement click?

Merci pour la lecture

javascriptangularangular2-templateangular-material2
14
Alex Lévy

Vous voulez déclarer une ViewChild dans votre contrôleur qui référence la MdSidenav dans votre composant, comme ceci:

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

où start est le nom du composant que vous voulez référencer, dans ce cas le sidenav.

Ensuite, vous pouvez appeler des méthodes sur cette adresse, comme this.sidenav.toggle() dans les fonctions de votre contrôleur.

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

15
Alexander Ciesielski

Passez l'objet à votre fonction.

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

Et dans tes ts:

export class AppComponent {

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