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，则可以使用ObservableMedia服务并将其绑定到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: ObservableMedia) {}
}

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

Answer 3

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

App.component.html

@property

app.component.ts

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

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

您可以尝试这样做。

我还创建了一些案例，然后调整了屏幕大小并对其进行了初始化。

app.component.html

<mat-sidenav-container class="container">
  <mat-sidenav class="sidebar" #sidenav mode="side" [(opened)]="opened">
    <div class="sidebar-menu">
      <ul>
        <li>Dashboard</li>
        <li>Dashboard</li>
        <li>Dashboard</li>
        <li>Dashboard</li>
        <li>Dashboard</li>
      </ul>
    </div>
  </mat-sidenav>

  <mat-sidenav-content>
    <div class="content-container">
      <button mat-raised-button color="primary" (click)="sidenav.toggle()">Toggle Side bar</button>
    </div>
  </mat-sidenav-content>

</mat-sidenav-container>

app.component.ts

import { Component, HostListener, ViewChild, OnInit } from '@angular/core';
import { MatSidenav } from "@angular/material";

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

  opened: boolean = true;

  @ViewChild('sidenav') sidenav: MatSidenav;
  
  // when screen is resized
  @HostListener('window:resize', ['$event'])
  onResize(event) {
    if(window.innerWidth < 1000){
      this.sidenav.close()
    }else{
      this.sidenav.open()
    }
  }

  // when the screen is initialized onLoad
  ngOnInit(){
    if((window.innerWidth) < 1000){
      this.opened = false;
    }
  }
}

app.component.scss

.container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    
  }

  .sidebar {
    width: 200px;
  }

Answer 6

我在这里使用过：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>

全幅示例图片：

较小的屏幕示例图像：

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

Sample Output

Material2 Auto隐藏sidenav在较小的屏幕上

6 个答案: