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

如果您提供代码示例，将非常有用，但我感谢您提供的任何帮助。

Answer 1

您应区分beforeunload上的window本机事件，并可以取消保护。 当您尝试关闭标签页/窗口时，第一个触发。这样一来，您就可以提示用户并对其执行event.preventDefault()，以取消关闭标签页/窗口。

谈论CanDeactivate后卫，它应该返回一个可观察/承诺/纯布尔值，它将告诉您是否可以停用当前路线。

因此最好分离两种方法（一种用于beforeunload，另一种用于后卫）。因为如果您想要然后将行为更改为不仅使用本机提示，还使用您的自定义模式窗口，则beforeunload的默认事件处理程序将不起作用，因为它处理同步代码。因此，对于beforeunload，您只能使用提示来要求用户不要离开页面。

loading = true;
@HostListener('window:beforeunload', ['$event'])
canLeavePage($event: any): Observable<void> {
  if(this.loading && prompt('You data is loading. Are you sure you want to leave?')) {
    $event.preventDefault();
  }
}

另一方面，Guard希望返回布尔值（或Promise，  或可观察）。因此，这里您可以返回条件的结果：

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

因此，在您的CanDeactivate防护中，它的使用方式类似于return component.canDeactivate()