如何在angular 2材料中隐藏侧面导航栏答案

【问题标题】：How to hide side navigation bar in angular 2 material如何在angular 2材料中隐藏侧面导航栏
【发布时间】：2019-06-26 16:54:19
【问题描述】：

我正在尝试使用 Angular 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>

【问题讨论】：

标签： angular angular-material navigationbar

【解决方案1】：

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

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

...

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

...

在你的 CSS 中，实现你的类

...

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

...

如果屏幕为 500 像素或更小，这将隐藏侧导航。查看媒体查询以获取有关如何使用此方法的更多信息。

【讨论】：

【解决方案2】：

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

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

您的 TS 文件： 您在 html 文件中声明的变量可以在组件 ts 文件中使用帮助@viewchild 访问该变量，请不要忘记将 sidenav 的类型定义为 MatSidenav。之后，您可以轻松访问 MatSidenav 上可用的所有方法，例如关闭、打开、切换等。

 import { Component, OnInit, ViewChild } from '@angular/core';
    import { MatSidenav } from '@angular/material';

    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
    })
    export class AppComponent implements OnInit {

      @ViewChild('sidenav') sidenav: MatSidenav;
      constructor(){

      }

      ngOnInit(){}

      toggleSideNav(){
        this.sidenav.toggle();
      }
    }

【讨论】：

尝试在您的代码中添加一些描述以供将来的读者阅读。比如，它有什么作用？它是如何解决问题的？
@Md.SukelAli，我已按照您的建议添加了详细信息。谢谢！

【解决方案3】：

我知道样式应该与 CSS 保持一致，但我采取了不同的方法来解决这个问题。

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

在你看来/html：

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

在您的打字稿文件中：

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 方法将在每次执行窗口调整大小事件时运行。

【讨论】：