Material2小さな画面でsidenavを自動的に隠す

Question

Material2には、画面幅に応じてsidenavを隠して表示するMaterial1 opened="$mdMedia('gt-md')"と似ていないようです。平均時間で

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