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、刷新页面、关闭浏览器窗口/选项卡等）时，window @ 987654330@ 事件激活（由于@HostListener('window:beforeunload') 注释）并自行处理confirm 对话框，没有CanDeactivate 保护。在这种情况下，Chrome 和 Firefox 会显示自己的未决更改警告消息。

您可以阅读更多关于beforeunload 事件及其运作方式here 的信息。您会在“注释”部分注意到它声明了以下内容：

在 Firefox 4 及更高版本中返回的字符串不会显示给用户。相反，Firefox 会显示字符串“此页面要求您确认是否要离开 - 您输入的数据可能不会被保存。”

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

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