如何通過轉義關閉 Angular Material Sidenav？

Question

我的目標是通過按Esc鍵關閉Angular Material Sidenav 。

我曾嘗試使用[autoFocus]="true"屬性來實現這一點，但沒有幫助。

問題是按下轉義鍵沒有任何效果——只有當我第一次在 sidenav 內點擊時才會按下轉義鍵工作。

我已經分叉了一個官方示例來演示這里的問題，因此您可以使用代碼。

我不確定這是否是 sidenav 的錯誤，或者只是我無法弄清楚如何捕獲焦點。

Answer 1

我的目標是通過按Escape鍵來關閉Angular Material Sidenav 。

我嘗試使用[autoFocus]="true"屬性來實現此目的，但是沒有幫助。

問題是按轉義鍵不起作用-僅當我先在sidenav中單擊時才按轉義鍵起作用。

我已經派生了一個官方示例來在此處演示此問題，因此您可以試用該代碼。

我不確定這是sidenav的錯誤，還是我無法弄清楚如何捕捉焦點。

Answer 2

你可以添加這樣的功能

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

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

這樣，無論您的焦點在哪里，它都應該關閉