Wie kann ich Angular 2 Material Sidenav in einer Komponente verwenden?

Question

Ich bin neu in eckigen und ich versuche, die Seile hier zu verstehen. Die Dokumente des neuen eckigen 2-Materials sind ein wenig verwirrend, aber ich habe es geschafft, Tabs und das Sitenav zu meiner App hinzuzufügen, aber ich kann keinen Knopf machen, um das Sitenav mit meiner Komponente zu öffnen. Dieses Beispiel ist die einzige Referenz, die ich habe, wie es gemacht wird und nicht viel darüber zu wissen, ich denke, es ist Winkel 1 zu verwenden? diese https://material.angularjs.org/latest/demo/sidenav

Was ich in meiner Komponente jetzt haben ist:

import { Component, OnInit, OnDestroy, ElementRef, Inject } from '@angular/core'; 
import { ActivatedRoute } from '@angular/router'; 
import {Http, Response} from '@angular/http'; 

import { MD_TABS_DIRECTIVES } from '@angular2-material/tabs'; 
import { MD_SIDENAV_DIRECTIVES } from '@angular2-material/sidenav'; 

@Component({ 
selector: 'my-ambient-detail', 
templateUrl: 'app/ambients/ambient-detail.component.html', 
directives: [MD_TABS_DIRECTIVES, MD_SIDENAV_DIRECTIVES], 
}) 
export class AmbientDetailComponent implements OnInit, OnDestroy { 


// constructor and other functions here 

openRightMenu(){ 
    //WHAT GOES HERE? 
} 

} 

Und im html:

<md-sidenav-layout> 

<!-- Content --> 
<md-content> 

    <md-button (click)="openRightMenu()"> 
    Open Right Menu 
    </md-button> 

</md-content> 

<!-- Sidebar --> 
<md-sidenav md-component-id="right" class="md-sidenav-right"> 

Sidebar content 
</md-sidenav> 
</md-sidenav-layout> 

So kann ich keinen klaren Hinweis finden, wie zu öffnen/schließen das Sitenav mit einer Schaltfläche, die Funktionen in der Komponente verwendet. Vielleicht mache ich das alles falsch, ich habe meine App direkt aus dem Helden-Tutorial in der eckigen Website erstellt, aber ich bin sehr verwirrt zwischen Winkel 1 und 2 von meinen Suchen zu diesem Thema.

Answer 1

Offenbar war das in der Tat Winkel 1, fand ich schließlich diese: https://justindujardin.github.io/ng2-material/#/components/sidenav, die mit Winkel 2 zu sein scheint und ich habe nicht einmal eine Funktion in meiner Komponente haben muß:

<md-sidenav-layout> 

    <!-- Content --> 
    <md-content> 
    <md-button (click)="right.open()"> 
     Open Right Menu 
    </md-button> 
    </md-content> 

    <!-- Sidebar --> 
    <md-sidenav #right md-component-id="right" class="md-sidenav-right"> 
    Sidebar content 
    </md-sidenav> 

</md-sidenav-layout> 

Answer 2

Sie müssen packen eine ViewChild-Referenz auf ein Element nach ID (#sidenav) und geben Sie sie in die MdSidenav-Komponente ein. Beachten Sie, dass die ViewChild-Referenz im Konstruktor noch nicht verfügbar ist, aber erst nach init.

import { Component, ViewChild, OnInit } from '@angular/core'; 
import { MdSidenav } from '@angular/material'; 

@Component({ 
    ..., 
    template: ` 
     <md-sidenav-container> 
      <md-sidenav #sidenav mode="side" opened="false"></md-sidenav> 
     </md-sidenav-container> 
     ` 
}) 

export class MyComponent implements OnInit { 
    @ViewChild('sidenav') sidenav: MdSidenav; 

    constructor() {} 

    ngOnInit() { 
     this.sidenav.onOpen.subscribe(() => { 
      console.log("Sidenav opened"); 
     }); 

     setTimeout(this.openSidenav.bind(this), 5000); 
    } 

    openSidenav() { 
     this.sidenav.open(); 
    } 
}