Question

我在Angular github repo上发布了这个问题，但被告知我要问的不是bug也不是新功能。他们建议我在这里发布这个问题。

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

==＆GT; 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);

Answer 1

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

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

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

    }
}

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

1 个答案: