Angular 12 Material 垫抽屉自动隐藏

Question

如何在屏幕大小调整为 1100px 代码示例时自动隐藏“mat drawer”将不胜感激。谢谢

Answer 1

您可以使用 @HostListener 绑定到 window.resize 事件处理程序并根据标志 (isOpened).

控制 mat-drawer 的打开

每次 window 调整大小时都会执行此函数，并且您的垫子抽屉将被隐藏以显示较低的分辨率。

分量：

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 垫抽屉自动隐藏

Angular 12 Material mat-drawer auto hide

angular-material

angular