Angular - 选择选项卡时重新加载页面？答案

【问题标题】：Angular - reload page when tab is selected?Angular - 选择选项卡时重新加载页面？
【发布时间】：2021-10-19 13:27:34
【问题描述】：

当用户单击我的 Angular 应用程序的浏览器选项卡时，有没有办法触发重新加载页面的功能？

我相信这可以通过 window.location.reload() 来完成，但我不确定如何在选项卡选择时触发这一行。

我认为这可以通过使 body/html 具有“onfocus='reloadPage()'”属性来完成，但我不希望它在我移动鼠标时刷新 500 次页面，当标签被聚焦/点击时只有一次。

【问题讨论】：

使用 Angular，您可能不想尝试重新加载页面。有什么具体原因吗？
是的 - 我们的应用程序使用 JBOSS/Wildfly 将我们的 Angular 应用程序托管到网页。 JBOSS/Wildfly 是一个 Windows 服务（也适用于 linux）。该服务必须开启/运行，您才能登录我们的网络应用程序。因此，当 Wildfly 未运行时，我有代码显示消息“Wildfly 已关闭或需要重新启动”。但我注意到，一旦我启动 Wildfly 备份，错误消息不会消失，直到我手动刷新页面。我不希望它每隔几分钟随机检查一次，我只希望它在用户单击选项卡时重新加载页面，这样他们就不会认为它仍然处于关闭/未运行状态。
酷。我的建议是不重新加载，你可以实现一个超时回调函数，它会再次检查状态并让消息消失。

标签： css angular typescript browser reload

【解决方案1】：

我喜欢@enjoibp3 解决方案，但不是添加和删除事件侦听器。你最好使用@HostListener (docs)

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html'
})
export class AppComponent {
  @HostListener('window:focus') onFocus() {
    console.log('window focus');

    window.location.reload();
  }
}

查看stackblitz代码示例here和演示项目here

【讨论】：

【解决方案2】：

window.addEventListener('focus', () => {
    window.location.reload();
});

因为它是 Angular，所以我会将它放到我的 app.component.ts 文件中 ngOnInit

更新

根据下面的 cmets，您还应该删除销毁时的事件侦听器。

@Component({...})
export class AppComponent implements OnInit, OnDestroy {
    ngOnInit(): void {
        window.addEventListener('focus', this.reloadPage);
    }

    reloadPage(): void {
        window.location.reload();
    }
    ngOnDestroy(): void {
        window.removeEventListener('focus', this.reloadPage);
    }
}

【讨论】：

我可以通过在 ngOnInit 的 outside 中声明这个函数来移除事件监听器：reloadPage = function(e) { window.location.reload() } 然后，我添加了这在同一个文件中的我的 ngOnInit() 中：window.addEventListener('focus',this.reloadPage) 然后，为了删除事件监听器，我将它放在同一个文件中的 ngOnDestroy() 中：window.removeEventListener('focus ',this.reloadPage)
@CollinFox 好电话，我可能也应该添加它！
我认为您不需要删除事件侦听器，因为当您重新加载页面时，所有事件侦听器都会被销毁。
我的应用程序从登录页面转到主页，所以如果我不删除事件侦听器，它会在每次单击/聚焦窗口时继续检查条件，即使不需要的主页

【解决方案3】：

您可以使用 javascript 来做到这一点，将其粘贴到您的 chrome 控制台，然后更改标签看看它是如何工作的

var hidden, visibilityChange;
if (typeof document.hidden !== "undefined") { 
    hidden = "hidden";
    visibilityChange = "visibilitychange";
}

function handleVisibilityChange() {
    if (!document[hidden]) {
        var initialPage = window.location.pathname;
        window.location.replace(initialPage);
    }
}

document.addEventListener(visibilityChange, handleVisibilityChange, false);

【讨论】：