Angular 6：离开页面时的简单确认

Question

我需要创建一个简单的确认窗口，我看到了很多示例，可以通过额外的操作（例如等待表单文件上传完成）来完成。但是我只需要创建一个默认确认窗口，并显示默认文本（如下图所示），以在用户希望离开当前页面时显示该窗口。而我完全不理解在处理 beforeunload 事件时应该提供什么逻辑。

如果这是重复问题，我最近很抱歉，但我没有找到任何解决方案。因此，我有：

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?
            }
        }
}

如果您能提供代码示例，那将非常棒，但我也感激任何形式的帮助。

- hofshteyn

Answer 1

您应该区分window上的beforeunload本机事件和CanDeactivate守卫。第一个在您尝试关闭选项卡/窗口时触发。因此，当它被触发时，您可以使用confirm(...)提示用户并在其上执行event.preventDefault()以取消关闭选项卡/窗口。

谈到CanDeactivate保护程序，它应返回布尔值的observable/promise/plain-value，告诉您是否可以停用当前路由。

因此，最好将两个方法分开（一个用于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、Observable）。因此，在这里您只需返回条件的结果：

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

因此，在您的 CanDeactivate 保护程序中，它将被用作 return component.canDeactivate()

- Danil Gudz

---

但是我如何检测选择了哪个选项（离开按钮或取消按钮）？因为这取决于他是否应该留下还是离开。 - hofshteyn

每个按钮在html中应具有属性(click)="functionName()"，该属性指向您想要调用的函数。 - user3606237

canLeavePage() 函数给我以下错误 -> 声明类型既不是 'void' 也不是 'any' 的函数必须返回一个值。ts(2355) - Sagar

Answer 2

如果需求是默认的窗口确认信息。那么可以通过以下代码实现。

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

输出：

如果脏检查返回true，则默认确认对话框会出现。 如果没有脏情况，弹出窗口将不会出现。

希望这能帮助到某些人。谢谢。

- Kms