如何在 angular 2 material 中隐藏侧边导航栏

Question

我正在尝试使用 angular 2 material 创建响应式侧边导航栏。我的侧边导航正在工作。总是打开导航bar.How缩小屏幕尺寸时隐藏它吗

这是我的代码：

<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

只需将 class 添加到您的 md-sidenav，然后让 class 在屏幕足够小时隐藏它。

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

...

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

...

在您的 css 中，实施您的 class

...

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

...

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

Answer 2

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

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

在你的view/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();
            }
        }
    }
}

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

Answer 3

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

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

您的 TS 文件： 您在 html 文件中声明的变量，您可以在 @viewchild 的帮助下访问组件 ts 文件中的该变量，请不要忘记将 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();
      }
    }

如何在 angular 2 material 中隐藏侧边导航栏

How to hide side navigation bar in angular 2 material

navigationbar

angular-material

angular