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 beforeunload事件激活（由于@HostListener('window:beforeunload')注释）并自行处理confirm对话框，而没有CanDeactivate警卫。在这种情况下，Chrome和Firefox会显示自己的待更改警告消息。

您可以详细了解beforeunload事件及其工作原理here。您将注意到＆＃34; Notes＆＃34;部分说明如下：

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

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

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

CanDeactivate确认消息

1 个答案: