Angular 2 Material SideNav在桌面上始终打开，在移动设备上始终打开

我用angular 2材质制作了这个简单的侧导航。 我只想对桌面保留oppened=“true”，对手机和笔记本保留默认行为。 这曾经出现在有角度的JS材质中。如何在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>

一个
两个
菜单
标题
{{title}}

在为这篇类似的文章苦苦挣扎之后，我使用了我在网站上找到的一个看似有点黑客的东西，我把它放进去了

此解决方案的关键在于，它在“打开”和“调整大小”事件中检查媒体大小，根据可用宽度显示/隐藏侧导航面板。这要归功于

我称之为hack，因为通过调整大小事件处理程序处理这一问题就像拿出一把大锤来解决问题。我认为有更容易的事，但我自己找不到更容易的事

---

上面提到的另一个问题是，如果你像我一样，也许你想要一个能保持打开状态的东西，那么你需要一个答案。

在为这篇类似的文章奋斗了一段时间后，我使用了我在网站上找到的、我已经加入的、看起来有点像黑客的东西

此解决方案的关键在于，它在“打开”和“调整大小”事件中检查媒体大小，根据可用宽度显示/隐藏侧导航面板。这要归功于

我称之为hack，因为通过调整大小事件处理程序处理这一问题就像拿出一把大锤来解决问题。我认为有更容易的事，但我自己找不到更容易的事

---

上面提到的另一个问题是，如果你像我一样，也许你想要一个保持打开的东西，那么你需要回答

你应该使用禁用关闭属性，如下所示

 w = window.innerWidth;
      constructor(){
        if (this.w > 450) {
        this.disableClose=true;
      } else {
        this.disableClose=false;
      }

HTML将作为

<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>

主要内容在这里


















马努酒吧

---

您应该使用禁用关闭属性，如下所示

 w = window.innerWidth;
      constructor(){
        if (this.w > 450) {
        this.disableClose=true;
      } else {
        this.disableClose=false;
      }

HTML将作为

<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>

主要内容在这里


















马努酒吧

---

vinagreti指出了非常有用的angular/flex布局项目，该项目重新引入了一些布局功能，这些功能曾是angular Material的一部分，但在版本2+中被删除。我已经在使用这个库了，所以可以很容易地将它与来自Angular Material的sidenav结合使用，从而实现您在这里描述的功能：拥有一个在大屏幕上始终打开的sidenav，但在小屏幕上可以切换

您可以使用sidenav组件的disableClose、mode和Open属性来获得所需的内容

标记：

<md-sidenav #sidenav [ngClass.xs]="{'full-width': true}" [disableClose]="isSidenavCloseDisabled" [mode]="sidenavPosition" [opened]="isSidenavOpen">
...Contents of Sidenav go here....
</md-sidenav>

---

@vinagreti指出了非常有用的angular/flex布局项目，该项目重新引入了一些布局功能，这些功能曾经是angular Material的一部分，但在版本2+中被删除。我已经在使用这个库了，所以可以很容易地将它与来自Angular Material的sidenav结合使用，从而实现您在这里描述的功能：拥有一个在大屏幕上始终打开的sidenav，但在小屏幕上可以切换

您可以使用sidenav组件的disableClose、mode和Open属性来获得所需的内容

标记：

<md-sidenav #sidenav [ngClass.xs]="{'full-width': true}" [disableClose]="isSidenavCloseDisabled" [mode]="sidenavPosition" [opened]="isSidenavOpen">
...Contents of Sidenav go here....
</md-sidenav>

---

我还没有用过它，但是我想你的答案在这里，看看下面我的答案和演示我还没有用过它，但是我想你的答案在这里，看看下面我的答案和演示你能简单地回答一下吗。我不完全明白，简单化答案？还是简单的回答？两种我都试试。让我想想。你能简单地回答一下吗。我不完全明白，简单化答案？还是简单的回答？两种我都试试。让我想想。这有点太低了，最好用材料设计+柔性布局，比如@Engineer_Andrew suggestedI在我之前的评论中解释了否决票。Andrews解决方案是正确的方法，它应该是正确的答案。@Tuukkalindros您有机会查看演示吗？这有点太低了，最好使用材料设计+柔性布局，如@Engineer_Andrew suggestedI在我之前的评论中解释了否决票。Andrews解决方案是正确的方法，它应该是正确的答案。@Tuukkalindros您有机会查看演示吗？？