如何在angular 2材质中隐藏侧导航栏

我试图创建响应侧导航栏使用角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> 

---

只需在md sidenav中添加一个类，然后在屏幕足够小时让该类隐藏它

在模板中，将类添加到md sidenav

...

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

...

---

如果屏幕为500px或更小，这将隐藏sidenav。查找媒体查询以了解有关如何使用此方法的更多信息。

只需在md sidenav中添加一个类，然后在屏幕足够小时将该类隐藏

在模板中，将类添加到md sidenav

...

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

...

---

如果屏幕为500px或更小，这将隐藏sidenav。查看媒体查询，了解有关如何使用此方法的更多信息。

我知道样式应该保留CSS，但我已采取了不同的方法来解决此问题

我使用Angular ViewChild和Hostlistener模块以编程方式控制它。当窗口大小改变时，它使您能够更好地控制要执行的操作

在您的视图/html中：

<md-sidenav #sidenav align="start" mode="side" opened>
    ...
</md-sidenav/>

在typescript文件中：

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

export class ClassName implements AfterViewInit {
    @ViewChild('sidenav') sidenav: MdSidenav;

    constructor() {}

    @HostListener('window:resize', [$event])
    onResize(event): void {
        if (this.sidenav !== undefined) {
            if (event.target.innerWidth <= 500) { // This can be any value.
                this.sidenav.close();
            } else {
                this.sidenav.open();
            }
        }
    }
}

---

使用这种方法，每次执行窗口调整大小事件时，onResize方法都会运行。

我理解样式应该保留CSS，但我采取了不同的方法来解决这个问题

我使用Angular ViewChild和Hostlistener模块以编程方式控制它。当窗口大小改变时，它使您能够更好地控制要执行的操作

在您的视图/html中：

<md-sidenav #sidenav align="start" mode="side" opened>
    ...
</md-sidenav/>

在typescript文件中：

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

export class ClassName implements AfterViewInit {
    @ViewChild('sidenav') sidenav: MdSidenav;

    constructor() {}

    @HostListener('window:resize', [$event])
    onResize(event): void {
        if (this.sidenav !== undefined) {
            if (event.target.innerWidth <= 500) { // This can be any value.
                this.sidenav.close();
            } else {
                this.sidenav.open();
            }
        }
    }
}

使用这种方法，每次执行窗口调整大小事件时，onResize方法都将运行。

您的视图文件： 您必须在组件html文件中添加sidenav文档引用变量

<mat-sidenav #sidenav>
   ...
 </mat-sidenav>

您的视图文件： 您必须在组件html文件中添加sidenav文档引用变量

<mat-sidenav #sidenav>
   ...
 </mat-sidenav>

---

尝试在代码中添加一些说明，以供将来的读者阅读。比如，它是干什么的？它是如何解决问题的？@Md.SukelAli，我已经按照您的建议添加了详细信息。非常感谢。尝试在代码中添加一些说明，以供将来的读者阅读。比如，它是干什么的？它是如何解决问题的？@Md.SukelAli，我已经按照您的建议添加了详细信息。非常感谢。