Angular 7 检测浏览器选项卡变为活动状态

Question

在我们的应用程序中，我们必须从后端服务中获取用户上下文。如果用户上下文发生变化，应用程序需要重新加载。因为用户可以在不同的选项卡中更改他们的上下文。我们每 5 秒 ping 我们的后端服务以检查用户上下文是否已更改。

有没有办法检测用户是否已停用或激活当前选项卡？这将节省每 5 秒 ping 后端一次。

用户可以在同一应用程序或其他应用程序的不同选项卡中更改上下文。

Answer 1

使用来自：here 的hasFocus() 方法，它存储选项卡焦点的上下文。

Document 接口的 hasFocus() 方法返回一个布尔值，指示文档或文档内的任何元素是否具有焦点。此方法可用于确定文档中的活动元素是否具有焦点。

如果您想要带有事件侦听器的异步版本，请使用Page Visibility API。

Answer 2

如果您需要 Angular 方式并且需要访问组件级别属性，请按以下方式操作：

@HostListener('document:visibilitychange', ['$event'])
appVisibility() {
   if (document.hidden) {
      //do whatever you want
      this.appHidden = true;
      console.log("Hidden: " + this.appHidden);
    } 
    else {
      //do whatever you want
      this.appHidden = false;
      console.log("SHOWN: " + this.appHidden);
    }
}