为什么在我的应用程序中更改选项卡时生命周期挂钩不运行？

我在 Angular github 存储库上发布了这个问题，但被告知我所问的既不是错误也不是新功能。他们建议我在这里发布这个问题。

我们的 Angular 应用程序使用带有 canActivate 防护的路由器。当用户在浏览器上添加新选项卡，然后按选项卡返回到加载应用程序的页面时，不会运行任何生命周期挂钩。此外，路由器防护根本不运行。为了解决这个问题，我们使用了以下 JS 并在我们的 index.html 中运行。我们如何在 typescript 中实现这一点并与 Angular 4 更加兼容？此外，这还需要我们重新加载页面：

==> JS

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);

上面的建议有效，但我发现这个更好：

@HostListener("document:visibilitychange", ["$event"])
handleVisibilityChange(event: any): void {

    // Route to home page to run the activate Guard
    if (!document.hidden) {          

    }
}