Angular应用如何在用户选中浏览器标签页时触发页面重新加载

优先方案：使用visibilitychange事件 #

这个是HTML5原生提供的页面可见性检测API，仅在标签页的可见状态发生变化时触发，完全不会被页面内的鼠标移动、元素点击/聚焦等内部操作影响，完美匹配你的需求。
在Angular根组件中按如下方式实现即可，记得在组件销毁时移除事件监听避免内存泄漏：

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
  private visibilityHandler?: () => void;

  ngOnInit(): void {
    this.visibilityHandler = () => {
      // 仅当页面从隐藏切换为可见时执行刷新
      if (document.visibilityState === 'visible') {
        window.location.reload();
      }
    };
    document.addEventListener('visibilitychange', this.visibilityHandler);
  }

  ngOnDestroy(): void {
    if (this.visibilityHandler) {
      document.removeEventListener('visibilitychange', this.visibilityHandler);
    }
  }
}

扩展方案：覆盖浏览器窗口从最小化恢复的场景 #

如果需要同时支持「用户最小化浏览器后重新打开」的触发场景，可以额外监听window的focus事件，搭配防抖逻辑避免两个事件同时触发重复执行刷新：

import { Component, OnInit, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
  private visibilityHandler?: () => void;
  private windowFocusHandler?: () => void;
  private reloadTimer?: number;

  ngOnInit(): void {
    // 监听标签页可见性变化
    this.visibilityHandler = () => {
      if (document.visibilityState === 'visible') {
        this.safeReload();
      }
    };
    document.addEventListener('visibilitychange', this.visibilityHandler);

    // 监听浏览器窗口获得焦点事件
    this.windowFocusHandler = () => {
      this.safeReload();
    };
    window.addEventListener('focus', this.windowFocusHandler);
  }

  // 防抖逻辑，300ms内仅执行一次刷新
  private safeReload(): void {
    if (this.reloadTimer) {
      clearTimeout(this.reloadTimer);
    }
    this.reloadTimer = window.setTimeout(() => {
      window.location.reload();
    }, 300);
  }

  ngOnDestroy(): void {
    // 清理所有监听和定时器
    if (this.visibilityHandler) {
      document.removeEventListener('visibilitychange', this.visibilityHandler);
    }
    if (this.windowFocusHandler) {
      window.removeEventListener('focus', this.windowFocusHandler);
    }
    if (this.reloadTimer) {
      clearTimeout(this.reloadTimer);
    }
  }
}

原方案问题说明 #

你之前尝试给body/html绑定onfocus的方式不可行，原因是页面内所有可聚焦元素（输入框、按钮等）获得焦点时，事件会向上冒泡到根节点，会导致页面内操作频繁误触发刷新。

内容的提问来源于stack exchange，提问作者cfoxy17