Question

如何在应用程序级别而不是在组件级别利用ngOnDestroy？

我想在用户关闭我的应用程序时执行以下代码。

ngOnDestroy(): void {
    localStorage.removeItem('token');
}

我把它放进AppComponent就像这样：

export class AppComponent implements OnDestroy {
     ngOnDestroy(): void {
         localStorage.removeItem('token');
     }
}

应用程序关闭时似乎没有触发OnDestroy。在这种情况下，我使用本地存储中的令牌来确定用户是否已登录，方法是检查令牌并重定向到登录页面（如果它不存在）。如果在关闭应用程序时未销毁令牌，这显然不起作用。

我可以在哪里放置此代码以获取我正在寻找的行为，还是有更好的方法来完成我想要完成的任务？

Answer 1

那不行。 Angular永远不会删除根组件。您需要window.onbeforeunload and window.onunload is not working in Firefox , Safari , Opera?

中所述的内容

Answer 2

与Günter Zöchbauer's suggestion类似（并使用适当的Angular2构造来实现它），而不是使用ngOnDestroy，为根组件类中的unload事件定义一个侦听器，如下所示：

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

@Component({ /* insert metadata here */ })
export class AppComponent {
    @HostListener('window:unload')
    private onUnload(): void {
        localStorage.removeItem('token');
    }
}

Answer 3

我不确定此处是否遗漏了任何内容，但您可以使用sessionStorage来存储您的令牌。根据mozilla docs：

＆＃34;当页面会话结束时，会在sessionStorage中存储的数据被清除。只要浏览器处于打开状态，页面会话就会持续，并且会在页面重新加载和恢复后继续存在。在新选项卡或窗口中打开页面将导致启动新会话...＆＃34;

ngOnDestroy不破坏localStorage令牌

3 个答案: