angular - 如何在移动设备上使用“后退按钮”关闭组件？

Question

我创建的配置文件组件看起来像弹出窗口。该组件可以显示在每个页面上（它不依赖于路由）。我想关闭它是智能手机上的“后退”按钮，所以我使用HostListener注释和window:popstate。它可以工作，但是如果我单击后退按钮 ProfileComponent 正在关闭，但浏览器也会转到上一页。我尝试使用preventDefault()修复该问题：

@HostListener('window:popstate', ['$event'])
@HostListener('window:keydown.escape')
closeProfile(event?: any) {
    if(event) {
      event.preventDefault();
    }
    this.store.dispatch(new layoutActions.CloseProfileAction());
}

但仍然无法正常工作。有没有办法覆盖后退按钮操作？

Answer 1

popstate 事件不可取消（如此处所述：https ://developer.mozilla.org/en-US/docs/Web/Events/popstate ）。所以 preventDefault 在这种情况下没有做任何事情。

但是，如果您想留在页面上，实际上阻止返回按钮并关闭 Profile 弹出窗口，您可以执行以下操作。

@HostListener('window:popstate', ['$event'])
@HostListener('window:keydown.escape')
closeProfile(event?: any) {
    history.go(1);
    this.store.dispatch(new layoutActions.CloseProfileAction());
}

希望这可以帮助。