角6:页面离开时的简单确认
我需要做一个简单的确认窗口，我看到了很多如何使用额外操作(比如等待文件上传表单不是字段)的例子。但是，我只需要使用默认文本(如下面的图片)制作一个默认的确认窗口来显示用户何时想离开当前页面。我无法完全理解在处理before unload事件时应该证明什么逻辑。
我最近很抱歉，如果这是一个dup的问题，然而，我没有找到任何解决办法。所以我有：
example.guard.ts
export interface CanComponentDeactivate {
canDeactivate: () => Observable<boolean> | boolean;
}
@Injectable()
export class ExampleGuard implements CanDeactivate<CanComponentDeactivate> {
constructor() { }
canDeactivate(component: CanComponentDeactivate): boolean | Observable<boolean> {
return component.canDeactivate() ?
true :
confirm('message'); // <<< does confirm window should appear from here?
}
}example.component.ts
export class ExampleComponent implements CanComponentDeactivate {
counstructor() { }
@HostListener('window:beforeunload', ['$event'])
canDeactivate($event: any): Observable<boolean> | boolean {
if (!this.canDeactivate($event)) {
// what should I do here?
}
}
}如果您能提供一个代码示例，那就太好了，但是我很感谢您的任何帮助。
回答 2
Stack Overflow用户
发布于 2019-01-15 13:48:18
您应该区分beforeunload本机事件在window和canDeactivate保护上。当您试图关闭选项卡/窗口时，将触发第一个选项卡/窗口。因此，当它被触发时，您可以使用confirm(...)用户并在其上执行event.preventDefault()以取消关闭选项卡/窗口。
谈到CanDeactivate保护，它应该返回一个可观察的/允诺/纯值布尔值，这将告诉您是否可以停用当前路由。
因此，最好将两种方法分开(一种用于beforeunload，另一种用于保护)。因为如果您想要更改行为，使其不仅使用本机确认，还可以使用自定义模式窗口，那么beforeunload的默认事件处理程序将无法工作，因为它处理同步代码。因此，对于beforeunload，您可以使用confirm只要求用户不要离开页面。
loading = true;
@HostListener('window:beforeunload', ['$event'])
canLeavePage($event: any): Observable<void> {
if(this.loading && confirm('You data is loading. Are you sure you want to leave?')) {
$event.preventDefault();
}
}另一方面，卫兵想要返回布尔值(或许诺，或可观察)。在这里，您可以返回条件的结果：
canDeactivate(): boolean {
return this.loading && confirm('You data is loading. Are you sure you want to leave?');
}因此，在您的CanDeactivate保护中，它将像return component.canDeactivate()一样使用
Stack Overflow用户
发布于 2022-04-25 17:34:20
如果需求是默认窗口确认消息。然后，可以通过下面的代码行来实现它。
/**
* Browser's default confirmation dialog box.
*/
@HostListener('window:beforeunload')
defaultConfirmation(): boolean {
if (!DIRTY_FORM_CHECK) return true;
else return false;
}输出：
如果脏签返回真，则会出现默认确认对话框。如果没有肮脏的情况，弹出就不会出现.
希望这能帮上忙。谢谢。
https://stackoverflow.com/questions/54199903
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号