Angular 12 Material mat-drawer 自动隐藏 [英] Angular 12 Material mat-drawer auto hide

问题描述

如何自动隐藏垫子抽屉"当屏幕调整为 1100px 代码示例时，将不胜感激.谢谢

How to auto-hide "mat drawer" when screen resizes to 1100px code example would be appreciated. Thank you

推荐答案

你可以使用 @HostListener 绑定到 window.resize 事件处理程序并根据标志(isOpened)控制mat-drawer的打开.

You can use use @HostListener which will be bound to window.resize event handler and control the opening of mat-drawer based on a flag (isOpened).

此功能将在每次调整窗口大小时执行，并且您的垫子抽屉将在分辨率较低时隐藏.

This function will be executed for every window resizing and your mat drawer will be hidden for lower resolution view.

组件:

export class SidenavAutosizeExample {
  isOpened: boolean = true;
  desktopViewWidth: number = 1100;
  ngOnInit() {
    this.onResize(window.innerWidth);
  }

  @HostListener('window:resize', ['$event.target.innerWidth'])
  onResize(width: number) {
    this.isOpened = width >= this.desktopViewWidth;
  }
}

模板:

<mat-drawer #drawer class="example-sidenav" mode="side" [opened]="isOpened">
    <p>Auto-resizing sidenav</p>
    <p>Lorem, ipsum dolor sit amet consectetur.</p>
    <button mat-raised-button>
      Toggle extra text
    </button>
  </mat-drawer>

工作示例:-https://stackblitz.com/edit/angular-8pfj1d?file=src%2Fapp%2Fsidenav-autosize-example.ts

这篇关于Angular 12 Material mat-drawer 自动隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！