检测用户是否在Angular组件中离开页面

Question

我在我的项目中使用Angular 4，在某些页面中，如果用户离开页面而不保存数据，我需要进行一些清理。我可以使用ngOnDestoy()实现此目的，但它仅在用户使用其中的链接离开页面时才有效。

当他们尝试按F5时尝试导航到另一个域或关闭标签时，警告他们未保存的更改，我使用以下代码：

@HostListener('window:beforeunload', ['$event'])
public beforeunload($event)
{
    if (this.hasChanges)
    {
        return false;
    }   
}

此代码显示默认浏览器弹出窗口，询问用户是否确实要离开页面。如果他们不想，那没关系，我不必做任何事情。但是他们认为他们不关心未保存的数据，那么我必须进行清理。

我看到[unload][1]对象中有window方法，我尝试过这样的方法：

@HostListener('window:unload', ['$event'])
public unload($event)
{
    // do some cleaning...
}

但这件事永远不会被解雇。我做错了什么，或者有其他方法可以做到这一点？