angular - Material2 在小屏幕上自动隐藏 sidenav

Question

看起来 Material2 没有任何类似于 Material1 的东西，opened="$mdMedia('gt-md')"它会根据屏幕宽度隐藏和显示 sidenav。

https://github.com/angular/material2/issues/45

同时，在我的项目中实现此类功能时，最好的方法是什么。

普朗克

Answer 1

这是一种方法。

app.component.html

<md-sidenav-layout>
   <md-sidenav #sidenav mode="side"><label>Sidenav</label></md-sidenav>
   <button md-raised-button="md-raised-button" color="primary" (click)="sidenav.toggle()">Open Sidenav</button>
</md-sidenav-layout>

app.component.ts

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

@Component({
    moduleId: module.id,
    selector: 'my-app',
    templateUrl: 'app.component.html'
})

export class AppComponent {
    @ViewChild('sidenav') sidenav: MdSidenav;

    @HostListener('window:resize', ['$event'])
    onResize(event) {
        if (event.target.innerWidth < 500) {
            this.sidenav.close();
        }
    }
}

Answer 2

如果您使用的是 Angular Flex-Layout，您可以使用MediaObserver服务并将其绑定到 mat-sidenav 的打开属性。

@Component({
selector: 'my-component',
template: `  
  <md-sidenav-container>
    <md-sidenav
      mode="over"
      [opened]="!media.isActive('xs')">
    </md-sidenav>
    ...        
  </md-sidenav-container>`
})
export class MyComponent {    
   constructor(public media: MediaObserver) {}
}

这将隐藏移动视口大小的 sidenav。

Answer 3

嗨，这就是我解决这个问题的方法。

App.component.html

<mat-sidenav-container class="container">
    <mat-sidenav class="sidenav" #sidenav mode="side" [opened]="screenWidth> 640">
        <mat-toolbar color="primary">
            <h1>Sidenav</h1>
        </mat-toolbar>
        <mat-list role="list">
            <mat-list-item role="listitem">Item 1</mat-list-item>
            <mat-list-item role="listitem">Item 2</mat-list-item>
            <mat-list-item role="listitem">Item 3</mat-list-item>
        </mat-list>
    </mat-sidenav>
    <mat-sidenav-content>
        <div class="content-container">
            <h1> text content</h1>
            <p>
                What is Lorem Ipsum? Lorem Ipsum is simply dummy text of the
                printing and typesetting industry. Lorem Ipsum has been the         
            </p>
        </div>
    </mat-sidenav-content>
</mat-sidenav-container>

app.component.ts

import { Component, ViewChild, HostListener  } from '@angular/core';
import { BehaviorSubject } from 'rxjs';
import {MatSidenav} from '@angular/material/sidenav';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  screenWidth: number;
  private screenWidth$ = new BehaviorSubject<number>(window.innerWidth);
  @ViewChild('sidenav') sidenav: MatSidenav;
  @HostListener('window:resize', ['$event'])
  onResize(event) {
    this.screenWidth$.next(event.target.innerWidth);
  }
  constructor() { }

  ngOnInit() {
    this.screenWidth$.subscribe(width => {
      this.screenWidth = width;
    });
  }
}

这是slackblitz中的代码

Answer 4

简单的解决方案：

  screenHeight: number;
  screenWidth: number;

  constructor() {
    this.screenHeight = window.innerHeight;
    this.screenWidth = window.innerWidth;
  }

在我们看来：

<mat-sidenav #sidenav class="example-sidenav" [opened]="screenWidth > 840" mode="side">

Answer 5

我在这里使用过：https ://material.angular.io/

app.component.html

import { Component } from "@angular/core";
import { AuthService } from "./auth.service";
import { Router } from "@angular/router";


export class User {
  id: number;
  username: string;
  firstName: string;
  lastName: string;
  token: string;
}

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  MenuRoutesArr = [
    { path: "dashboard", pathName: "Dashboard" },
    { path: "user", pathName: "Users" }
  ];
  currentUser: User;
  screenWidth: number;
  title = "FrontEnd";
  constructor(
    private router: Router,
    private authenticationService: AuthService
  ) {
    this.screenWidth = window.innerWidth;
    window.onresize = () => {
      // set screenWidth on screen size change
      this.screenWidth = window.innerWidth;
    };
    //snav.toggle()
    this.authenticationService.currentUser.subscribe(
      x => (this.currentUser = x)
    );
  }

}

app.component.html

<mat-toolbar color="primary">
  <button mat-icon-button (click)="snav.toggle()" [ngStyle]="{ display: screenWidth > 840 ? 'none' : 'block' }">
    <mat-icon>menu</mat-icon>
  </button>
  <h1>Responsive App</h1>
  <span class="fill-space"></span>

  <button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Example icon-button with a menu">
    <i class="material-icons">
      account_circle
    </i>
  </button>

  <mat-menu #menu="matMenu">
    <button mat-menu-item>
      <i class="fa fa-cog" aria-hidden="true"></i>
      <span>Config Profile</span>
    </button>

    <button mat-menu-item>
      <i class="fa fa-sign-out" aria-hidden="true"></i>
      <span>Logout</span>
    </button>
  </mat-menu>
</mat-toolbar>

<mat-sidenav-container>
  <mat-sidenav #snav [opened]="screenWidth > 840" [mode]="screenWidth > 840 ? 'side' : 'over'" fixedTopGap="56">
    <mat-nav-list>
      <a mat-list-item class="nav-item nav-link" (click)="(screenWidth > 840) ? '' : snav.toggle()" *ngFor="let routePath of MenuRoutesArr"
        [routerLink]="[routePath.path]">{{ routePath.pathName }}</a> 
    </mat-nav-list>
  </mat-sidenav>

  <mat-sidenav-content>
    <p>
      <router-outlet></router-outlet>
    </p>
  </mat-sidenav-content>
</mat-sidenav-container>

全宽示例图像：

小屏幕示例图像：

菜单选择样本图像后的小屏幕：

样本输出