Angular6：页面离开时的简单确认

Question

我需要做一个简单的确认 window 并且我看到了很多关于如何通过额外的操作来完成它的例子（比如等到表单的文件上传不是字段）。但我只需要使用默认文本（如下图所示）进行默认确认 window，以便在用户想要离开当前页面时显示它。而且我不能完全理解我应该在处理 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?
            }
        }
}

如果您能提供代码示例就太好了，但我很感激您提供的任何帮助。

Answer 1

您应该区分 beforeunload window 上的本机事件和 canDeactivate 守卫。当您尝试关闭 tab/window 时，第一个被触发。因此，当它被触发时，您可以 confirm(...) 用户并对其执行 event.preventDefault() 以取消关闭 tab/window.

谈论 CanDeactivate 保护它应该 return 一个 observable/promise/plain-value 布尔值，它将告诉您是否可以停用当前路线。

所以最好分开两种方法（一种用于beforeunload，另一种用于守卫）。因为如果你想改变行为，不仅使用本机确认，而且你的自定义模式 window 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 希望布尔值被 returned（或 Promise，或可观察）。所以在这里你可以 return 你的条件的结果：

canDeactivate(): boolean {
  return this.loading && confirm('You data is loading. Are you sure you want to leave?');
}

所以在你的CanDeactivate守卫中它会像return component.canDeactivate()

一样使用

Answer 2

如果要求默认window确认信息。然后可以通过以下代码行实现。

/**
 * Browser's default confirmation dialog box.
 */
  @HostListener('window:beforeunload')
  defaultConfirmation(): boolean {
    if (!DIRTY_FORM_CHECK) return true;
    else return false;
  }

输出：

如果脏检查 return true，将显示默认确认对话框。在没有脏的情况下，pop-up不会出现

希望这可能对某人有所帮助。谢谢

Angular6：页面离开时的简单确认

Angular 6: simple confirmation on page leaving

onbeforeunload

typescript

angular

angular-router-guards