Angular 2 Material SideNav总是在desktp上打开，在手机上是normal的

问题描述

我在角度2材质中做了这个简单的侧面导航。
我只想在桌面上保持oppened =true，并保持手机和笔记本电脑的默认行为。
这个曾经存在于Angular JS材质中。如何在Angular 2中实现这个功能？

 < md-sidenav-container fullscreen> 
< md-sidenav＃sideNav> 
< md-nav-list> 
< a> One< / a> 
< a>两个< / a> 
< / md-nav-list> 
< / md-sidenav> 
< md-toolbar color =primary> 
<按钮md-icon-button（click）=sideNav.toggle（）> 
< md-icon>菜单< / md-icon> 
 
< / button> 
< span>标题< / span> 
< / md-toolbar> 
 
< h1> 
 {{title}} 
< / h1> 
< / md-sidenav-container> 
  

解决方案

您应该使用 disableClose 属性如下

  w = window.innerWidth; 
 constructor（）{
 if（this.w> 450）{
 this.disableClose = true; 
} else {
 this.disableClose = false; 
 
 $ / code $ / pre 
 $ b 
 HTML将会像 
 
 
 < md-sidenav-container class =container-fluid> 
< div class =col-md-1> 
<按钮md-button（click）=sidenav.open（）> 
< i class =fa fa-list>< / i> 
< / button> 
< / div> 
< div class =col-md-11> 
主要内容在这里
< br>< br>< br>< br>< br>< br>< br>< BR><峰; br><峰; br><峰; br><峰; br><峰; br><峰; br><峰; br> 
< / div> 
< md-sidenav #sidenav class =example-sidenav[disableClose] =disableClose> 
  Manu bar 
< / md-sidenav> 
  
    
 
I made this simple side nav in angular 2 material.I want to keep oppened="true" only for desktop and keep the default behavior for mobiles and laptops.This used to be present in Angular JS material. How do I implement this in Angular 2 ?
<md-sidenav-container fullscreen>
  <md-sidenav #sideNav>
    <md-nav-list>
      <a>One</a>
      <a>Two</a>
    </md-nav-list>
  </md-sidenav>
  <md-toolbar color="primary">
    <button md-icon-button (click)="sideNav.toggle()">
      <md-icon>menu</md-icon>

</button>
<span>Title</span>
  </md-toolbar>

  <h1>
    {{title}}
  </h1>
</md-sidenav-container>
 解决方案 
You should be using disableClose property as below 
 w = window.innerWidth;
      constructor(){
        if (this.w > 450) {
        this.disableClose=true;
      } else {
        this.disableClose=false;
      }
HTML will be as 
<md-sidenav-container class="container-fluid" >
  <div class="col-md-1">
    <button md-button (click)="sidenav.open()">
      <i class="fa fa-list"></i>
    </button>
  </div>
  <div class="col-md-11">
    Main content goes here
    <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
  </div>
  <md-sidenav #sidenav class="example-sidenav" [disableClose]="disableClose">
<!---------------------------above line-------------------------------->
   Manu bar
  </md-sidenav>
LIVE DEMO
                        
这篇关于Angular 2 Material SideNav总是在desktp上打开，在手机上是normal的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！