Wiederverwendbare SideNav in Angular2 Material Design

Question

Ich habe begonnen, Angular2 und Material Design zu lernen. Ich möchte eine App erstellen, die die folgenden Komponenten enthält. Siehe Bild unten für Referenz

1. Hamburger-Menü-Taste. Durch Antippen wird das Seitenteil freigegeben.
2. Seitenteil. Es wird mehrere andere Optionen haben. Dieses Menü ist in allen App-Bildschirmen

Ich habe erstellt 3 Komponenten wie im Bild sichtbar gemeinsam. rechten Menü-component.html sieht wie unten

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

Ich möchte wissen, wie enthüllen ich dieses Menü auf die Schaltfläche auf die Erschließung, sei es auf dem Startbildschirm oder dem Bildschirm über

Das Beispiel in die docs zeigen die Implementierung auf einer einzigen Seite, aber nicht als wiederverwendbare Menükomponente

Edit 1: ich würde nicht wie Login, Registrierung wie die Taste auf der root-Seite als einige Bildschirme platzieren usw. wird nicht Habe die Speisekarte. Aber wenn sie auf der Root-Seite platziert werden, ist ein besserer Ansatz und die Schaltfläche kann angezeigt/versteckt werden, ich werde es dann hinzufügen.

Bearbeiten 2: Ich habe versucht, das Beispiel in der Angular Docs, ohne eine Zeile Code zu ändern.

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

Als ich "open sidenav" klicken, gibt es die folgenden Fehler in der Konsole

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

bearbeiten 3: Im Folgenden sind die Versionen der Module

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

Erstellen Sie einen Dienst, der die Verbindung zwischen dem Sitenav und der Symbolleiste behandelt.

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>