时间戳

首页 > 解决方案 > Angular 8 - 捕获窗口关闭

angular - Angular 8 - 捕获窗口关闭

问题描述

我正在使用我的网络应用程序中打开一个外部页面，window.open并添加了一个addEventListnerforunload来捕获窗口关闭。在unload事件块中，我想执行一些操作，然后重定向到另一个页面。我可以打开一个新选项卡，但是一旦打开选项卡，unload块内的侦听器代码也会被触发。我只想在窗口关闭后触发该代码。

HTML：

<button type="button" (click)="goToUrl('https://mywebsite.com')">Click me!</button>

零件：

verifyWindow: any;
goToUrl(url: string): void {
    this.loading = true;
    this.verifyWindow = window.open(url, '_blank', 'height=500,width=400,left=100,top=100,resizable=yes,scrollbars=yes,toolbar=yes,menubar=no,location=no,directories=no, status=yes');

    this.verifyWindow.addEventListener('unload', () => {
        this.userInfoService.accountInfo = {
            firstName: 'fname',
            lastName: 'lname',
            userName: 'uname',
            email: this.userInfo.email
        }
        this.router.navigateByUrl('register')
    });


}

标签： angularangular8

解决方案

您正在寻找的解决方案可能是 beforeunload。看一下它，但据我了解，这将立即执行与“卸载”处理程序绑定的代码块。这应该可以工作，因为您已经在这段代码上方定义了 verifyWindow。

@HostListener('verifyWindow:beforeunload')
        doSomething() {
           this.userInfoService.accountInfo = {
                firstName: 'fname',
                lastName: 'lname',
                userName: 'uname',
                email: this.userInfo.email
            }
            this.router.navigateByUrl('register')
            });
         }

goToUrl(url: string): void { window.open()... }

这是一个使用 onbeforeunload 方法的 Angular 解决方案：在 Angular2 中有没有像 window.onbeforeunload 这样的生命周期钩子？

您可以在这里找到更多解释：https ://developer.mozilla.org/de/docs/Web/API/WindowEventHandlers/onbeforeunload

推荐阅读