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
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
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();
}
}
<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();
}
}
}