我需要创建一个简单的确认窗口，并且看到了许多示例，这些示例说明了如何通过额外的操作来完成此操作（例如，等到表单的文件上传不在字段中时）。但是我只需要创建一个带有默认文本的默认确认窗口（如下面的图片所示），以在用户希望从当前页面离开时显示它。而且我无法完全理解在处理before unload事件时应证明哪种逻辑。
我最近很抱歉，如果遇到一些问题，但是，我没有找到任何解决方案。所以我有：
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?
}
}
}
如果您提供示例代码，那将是很棒的，但是我感谢任何帮助。
最佳答案
您应该区分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();
}
}
另一方面，Guard希望将布尔值返回（或Promise，
或可观察）。因此，您可以在这里返回条件的结果：
canDeactivate(): boolean {
return this.loading && confirm('You data is loading. Are you sure you want to leave?');
}
这样，在您的
CanDeactivate保护中，它将像return component.canDeactivate()一样使用