当在 mat-drawer 内的 mat-select 上按下退出键时，mat-drawer 关闭答案

【问题标题】：mat-drawer closes when the escape key is pressed on mat-select inside mat-drawer当在 mat-drawer 内的 mat-select 上按下退出键时，mat-drawer 关闭
【发布时间】：2020-12-11 01:24:47
【问题描述】：

垫子抽屉内有一个垫子选择角度标签。当焦点在 mat-select 上并展开时，按转义键时，整个 mat-drawer 关闭，但 mat-select 的下拉菜单应该关闭。

我在想我们可以阻止转义键的默认行为，但它也会阻止关闭 mat-select 并最终阻止 mat-drawer。

实际：当 mat-select 仍处于展开状态时，整个 mat-drawer（侧导航窗口）会在按下退出时关闭。

预期：首先 mat-select 应该在按下 escape 时折叠，然后在按下 escape 时垫抽屉应该关闭。enter image description here

【问题讨论】：

你好孤独的士兵，你能按照stackoverflow.com/help/how-to-ask发布一些代码sn-ps吗？
嗨 Lone Soldier，您已经标记了 angularjs 和 angular，它们是两个不同的框架（尽管第二个是基于第一个的概念）。请根据您实际使用的框架删除不相关的标签。
您好，请问您使用的是哪个版本的 Angular Material？你使用的是 Angular 还是 AngularJs？
@wentjun 我相信是Angular，看来AngularJS还在整个md命名上。

标签： angular angular-material

【解决方案1】：

下一次，请制作您自己的可编辑演示，以便我们进行处理。无论如何，我对您的问题的解决方案是通过按下“退出”键来停止事件传播。这是通过绑定keydown 事件来完成的。

我使用我的解决方案创建了一个demo，其中mat-select 放置在mat-drawer 中。

但是，请注意，如果您想在 mat-select 上选择某些内容后使用转义键，则必须通过在 mat-select 外部点击/单击来“取消聚焦”mat-select，以便 mat-select -select 不再是“焦点”。

<mat-form-field>
  <mat-label>Cars</mat-label>
  <mat-select (keydown.escape)="$event.stopPropagation()">
    <mat-option  *ngFor="let food of foods" [value]="food.value">
      {{food.viewValue}}
    </mat-option>
  </mat-select>
</mat-form-field>

这将防止'escape' 键在 mat-select 聚焦时关闭抽屉，但允许您在不使用 mat-select 时使用 'escape' 键关闭 mat-drawer。

【讨论】：