angular - CanDeactivate 确认消息

Question

我已经实现了一个 CanDeactivate 保护来避免用户在上传过程中离开页面并且它有效。问题是我的消息始终是默认消息(由于浏览器语言而使用荷兰语)，即使我自己设置消息，仍然显示相同的默认 confirm 窗口。我想写我自己的消息(实际上我有一个我想展示的模态，但首先我想看看如何处理我的简单消息)

有什么想法吗？我错过了什么吗？

这是代码

守卫。

import { Injectable, ViewContainerRef } from '@angular/core';
import { CanDeactivate } from '@angular/router';
import { Observable } from 'rxjs/Observable';
import { DialogService } from '../services';
    
export interface PendingUpload {
   canDeactivate: () => boolean | Observable<boolean>;
}
@Injectable()
export class PendingUploadGuard implements CanDeactivate<PendingUpload> {
    constructor(
        private dialogService: DialogService,
        private viewContainerRef: ViewContainerRef
    ) { }
    
    canDeactivate(component: PendingUpload): boolean | Observable<boolean> { 
        return component.canDeactivate()
           ? true
           : confirm("Test custom message");
           //dialog I want to use later
           //this.dialogService.confirm("modal title", "modal body", this.viewContainerRef);                   
     }
 }

组件

import { Component, OnInit, HostListener } from '@angular/core';

import { Observable } from 'rxjs/Observable';

import { PendingUpload } from '../../shared/validators/pending-upload.guard';

import './../../rxjs-operators';

@Component({
    selector: 'component-selector',
    templateUrl: './html',
    styleUrls: ['./css']
})
export class ScannerUploadComponent implements OnInit, PendingUpload {
    uploading: boolean = false;

    constructor() { }

    ngOnInit() {
        this.uploading = false;
    }

    @HostListener('window:beforeunload')
    canDeactivate(): Observable<boolean> | boolean {  
        return !this.uploading;
    }
}

Answer 1

您的自定义消息只会在尝试导航到您的 Angular 应用程序中的其他地方时显示(例如，从 http://localhost:4200/#/test1 导航到 http://localhost:4200/#/test2 )。这是因为 CanDeactivate 守卫只在您的 Angular 应用程序中通过 Angular 路由器进行路由更改时激活。

当离开您的 Angular 应用程序时(例如，从 http://localhost:4200/#/test1 导航到 http://stackoverflow.com 、刷新页面、关闭浏览器窗口/选项卡等)，窗口 beforeunload 事件激活(由于 @HostListener('window:beforeunload') 注释)并处理其上的 confirm 对话框自己的，没有 CanDeactivate 守卫。在这种情况下，Chrome 和 Firefox 会显示它们自己的待定更改警告消息。

您可以阅读有关 beforeunload 事件及其工作原理的更多信息 here .您会在“注释”部分注意到它声明如下:

In Firefox 4 and later the returned string is not displayed to the user. Instead, Firefox displays the string "This page is asking you to confirm that you want to leave - data you have entered may not be saved."

Chrome 遵循类似的模式，解释为 here .

IE/Edge 似乎仍然提供指定自定义 beforeunload 消息的能力。可以看到一个例子here .