Material2在較小的屏幕上自動隱藏sidenav

Question

它看起來像Material2沒有類似於Material1 opened="$mdMedia('gt-md')"的任何內容，隱藏和顯示sidenav取決於屏幕寬度。

https://github.com/angular/material2/issues/45

在平均時間，會是什麼，而在我的項目實施這樣的特徵採取最好的辦法。

Plunker

Answer 1

下面是做這件事的一種方式。

app.component.html

<md-sidenav-layout> 
    <md-sidenav #sidenav mode="side"><label>Sidenav</label></md-sidenav> 
    <button md-raised-button="md-raised-button" color="primary" (click)="sidenav.toggle()">Open Sidenav</button> 
</md-sidenav-layout> 

app.component.ts

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

@Component({ 
    moduleId: module.id, 
    selector: 'my-app', 
    templateUrl: 'app.component.html' 
}) 

export class AppComponent { 
    @ViewChild('sidenav') sidenav: MdSidenav; 

    @HostListener('window:resize', ['$event']) 
    onResize(event) { 
     if (event.target.innerWidth < 500) { 
      this.sidenav.close(); 
     } 
    } 
}