Sidenav réutilisable dans la conception matérielle d'Angular2

Question

J'ai commencé à apprendre la conception d'Angular2 et de matériel. Je veux créer une application qui a les composants ci-dessous. Voir ci-dessous image pour référence

1. Bouton de menu Hamburger. En tapant dessus, vous découvrirez le panneau latéral
2. Panneau latéral. Il aura plusieurs autres options. Ce menu est commun à tous les écrans d'applications

J'ai créé 3 composants visibles dans l'image. droit menu component.html se présente comme ci-dessous

<md-sidenav #sidenav mode="side" class="app-sidenav"> 
    <ul> 
    <li>Menu Item</li> 
    <li>Menu Item</li> 
    <li>Menu Item</li> 
    <li>Menu Item</li> 
    <li>Menu Item</li> 
    <li>Menu Item</li> 
    </ul> 
</md-sidenav> 

Je veux savoir comment puis-je révélerai ce menu appuyant sur le bouton, que ce soit à partir de l'écran d'accueil ou l'écran à propos

L'exemple le docs montrent la mise en œuvre dans une seule page, mais pas en tant que composant de menu réutilisable

Edit 1: Je ne voudrais pas placer le bouton sur la page racine que certains écrans tels que connexion, l'enregistrement etc. seront pas avoir le menu. Mais si les placer sur la page racine est une meilleure approche et le bouton peut être montré/caché, je vais l'ajouter ensuite.

Édition 2: J'ai essayé d'utiliser l'exemple dans les docs Angular sans changer de ligne de code.

<md-sidenav-container class="example-container"> 
    <md-sidenav #sidenav class="example-sidenav"> 
    Jolly good! 
    </md-sidenav> 

    <div class="example-sidenav-content"> 
    <button md-button (click)="sidenav.open()"> 
     Open sidenav 
    </button> 
    </div> 

</md-sidenav-container> 

Lorsque je clique sur le bouton "sidenav ouvert", il donne l'erreur ci-dessous dans la console

EXCEPTION: Error in ./HomeComponent class HomeComponent - inline template:34:4 caused by: self._el_42.open is not a function 

Edit 3: Voici les versions des modules

angular-cli: 1.0.0-beta.28.3 
node: 6.9.5 
os: darwin x64 
@angular/animations: 4.1.3 
@angular/common: 2.4.10 
@angular/compiler: 2.4.10 
@angular/core: 2.4.10 
@angular/forms: 2.4.10 
@angular/http: 2.4.10 
@angular/material: 2.0.0-beta.3 
@angular/platform-browser: 2.4.10 
@angular/platform-browser-dynamic: 2.4.10 
@angular/router: 3.4.10 
@angular/compiler-cli: 2.4.10 

Answer 1

Créez un service qui gère la connexion entre le sidenav et la barre d'outils.

sidenav.service.ts

@Injectable() 
export class SidenavService { 
    toggle = new EventEmitter(); 

    constructor() { 
    } 
} 

toolbar.component.ts

export class ToolbarComponent implements OnInit { 

    constructor(public sidenavService: SidenavService) { } 
} 

toolbar.component.html

<md-toolbar color="primary" fxLayout="row" color="none"> 
    <button ... (click)="sidenavService.toggle.emit()"> ... </button> 
</md-toolbar> 

sidenav.component.ts

@ViewChild('sidenav') sidenav: MdSidenav; 

constructor(private sidenavService: SidenavService) { 

    this.sidenavService.toggle 
     .asObservable() 
     .subscribe(
     () => this.sidenav.toggle() 
     ); 
} 

sidenav.component.html

<md-sidenav #sidenav>...</md-sidenav>