角度2の素材のサイドナビゲーションバーを非表示にする方法

Question

角度2の素材を使用して応答性サイドナビゲーションバーを作成しようとしています。私のサイドナビゲーターが働いています。常にナビゲーションバーが開きます。画面サイズを小さくすると隠す方法は？

これは私のコードです：

<md-sidenav-container style="width: 100%" onloadstart="false"> 
    <div class="flex-container" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center center" fxLayoutAlign.xs="start"> 
    <md-toolbar color="primary"> 
     <md-icon>menu</md-icon> 
     <span>Profile</span> 
     <span class="example-fill-remaining-space"></span> 
     <span> 
     <button md-icon-button [mdMenuTriggerFor]="menu"><md-icon>more_vert</md-icon></button> 
     <md-menu #menu="mdMenu"> 
      <button md-menu-item><md-icon>swap_horiz</md-icon><span>toggle</span></button> 
      <button md-menu-item disabled><md-icon>person</md-icon><span>profile</span></button> 
      <button md-menu-item><md-icon>exit_to_app</md-icon><span>log out</span></button> 
     </md-menu> 
     </span> 
    </md-toolbar> 
    <md-sidenav-layout class="demo-sidenav-layout"> 
     <md-sidenav align="start" mode="side" opened> 
     <md-list> 
      <md-list-item> 
      <a routerLink="profile-home"><button md-button ><md-icon>home</md-icon> Home </button></a></md-list-item> 
      <md-list-item> 
      <a routerLink="profile-security"><button md-button ><md-icon>security</md-icon> Security </button></a></md-list-item> 
      <md-list-item> 
      <a routerLink="profile-settings"><button md-button ><md-icon>settings</md-icon>Settings </button></a></md-list-item> 
     </md-list> 
     </md-sidenav> 
     <router-outlet></router-outlet> 
    </md-sidenav-layout> 
    </div> 
</md-sidenav-container> 

Answer 1

ただ、画面が十分に小さい場合、そのクラスはそれを隠している、お使いのMD-sidenavにクラスを追加します。テンプレートで

は、画面が500pxなど以下である場合、これはsidenavを非表示になります

... 

@media only screen and (max-width: 500px) { 
    .hide-on-small-screens { 
     display: none; 
    } 
} 

... 

クラス実装し、あなたのCSSでのMD-sidenav

... 

<md-sidenav align="start" mode="side" opened class="hide-on-small-screens"> 
     <md-list> 
      <md-list-item> 

... 

にクラスを追加します。このメソッドの使用方法の詳細については、メディアクエリを参照してください。