如何通过转义关闭 Angular Material Sidenav？答案

【问题标题】：How to close Angular Material Sidenav with escape?如何通过转义关闭 Angular Material Sidenav？
【发布时间】：2020-04-07 05:52:59
【问题描述】：

我的目标是按退出键关闭Angular Material Sidenav。

我尝试使用[autoFocus]="true" 属性来实现这一点，但没有任何帮助。

问题是按转义键没有效果 - 只有如果我第一次在 sidenav 内单击时按转义键起作用。

我已经 fork 了一个官方示例来演示 the issue here，所以你可以玩弄代码。

我不确定这是否是 sidenav 的错误，或者只是我无法弄清楚如何捕获焦点。

【问题讨论】：

似乎在模式 over 和 push stackblitz.com/angular/pabvpykmjoj 下开箱即用。似乎只是模式 'side' 的问题。
我检查了这个例子，发现当你的活动元素是sidenav时，它会被esc关闭，请尝试点击sidenav部分并按下esc
是的 - 问题出在“边”上。 @AshotAleqsanyan 我知道它可以通过首先单击 sidenav 部分并按 esc 来启动，但这是一种解决方法 - 不是解决方案。

【解决方案1】：

您可以使用Hostlistener 监听esc 键来解决问题。像这样：

@HostListener("document:keyup.esc")
  onkeyup() {
    console.log("close it");
    this.opened = false;
  }

这是stackblitz 示例

【讨论】：

【解决方案2】：

你可以像这样添加一个函数

 <mat-drawer-container (keydown.escape)="drawer.closed = true"...

<mat-drawer #drawer mode="side" ...

这样，无论您的焦点在哪里，它都应该关闭

【讨论】：