angular - 退出全屏模式时不会调用 Esc 函数

Question

我有一些内容正在全屏显示。

我想要的是在按下退出全屏的 Esc 时触发一个功能。请通过以下链接: https://stackblitz.com/edit/angular-zk6udf

请注意:请点击在新窗口中打开执行窗口。以便正确查看全屏模式。

在上面，当我点击按钮时，它进入了全屏模式。但是当我按 Esc 时，隐藏的文本不会显示出来。相反，当我再次按下 Esc 时，它就会那样做。我正在使用 HostListener 来实现这一目标。

如何实现退出全屏时调用函数？

谢谢。

Answer 1

改为听fullscreenchange在你的主机监听器中:

@HostListener("document:fullscreenchange", ["$event"]) onKeydownHandler(
  event: KeyboardEvent
) {
  // has exited
  if (!document.fullscreenElement) { 
    this.showTextAfterEscape = true;
  }
}

您的 STACKBLITZ