CanDeactivate 确认消息 [英] CanDeactivate confirm message
问题描述
我已经实现了一个 CanDeactivate 保护以避免用户在上传过程中离开页面并且它可以工作.问题是我的消息始终是默认消息(由于浏览器语言而使用荷兰语)，即使我自己设置消息，仍然显示相同的默认 confirm 窗口.我想写我自己的消息(实际上我有一个我想展示的模式，但首先我想看看我只使用我的简单消息)
I've implemented a CanDeactivate guard to avoid user leave the page during the upload and it works. The problem is that my message is always a default message (in dutch because of the browser language) and, even setting a message myself, still show the same default confirm window. I would like to write my own message (actually I have a modal that I want to show, but first I would like to see working just with my simple message)
任何想法可能是什么?我错过了什么吗?
Any ideas what could it be? Am I missing something?
这是代码
守卫.
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;
}
}
推荐答案
您的自定义消息仅在尝试导航到 Angular 应用程序内的其他位置 时才会显示(例如，从 http://localhost:4200/#/test1 到 http://localhost:4200/#/test2).这是因为 CanDeactivate 守卫只在你的 Angular 应用程序中通过 Angular 路由器进行路由更改时激活.
Your custom message will only be shown when trying to navigate elsewhere within your Angular app (e.g., navigating from http://localhost:4200/#/test1 to http://localhost:4200/#/test2). This is because the CanDeactivate guard only activates for route changes made via the Angular router, within your Angular app.
当导航远离你的 Angular 应用时(例如，从 http://localhost 导航:4200/#/test1 到 http://stackoverflow.com，刷新页面，关闭浏览器窗口/标签等.)，window beforeunload 事件激活(由于 @HostListener('window:beforeunload') 注释)并处理 confirm 对话框本身，没有 CanDeactivate 保护.在这种情况下，Chrome 和 Firefox 会显示自己的待定更改警告消息.
When navigating away from your Angular app (e.g., navigating from http://localhost:4200/#/test1 to http://stackoverflow.com, refreshing the page, closing the browser window/tab, etc.), the window beforeunload event activates (due to the @HostListener('window:beforeunload') annotation) and handles the confirm dialog on its own, without the CanDeactivate guard. In this case, Chrome and Firefox display their own pending changes warning message.
您可以阅读有关 beforeunload 事件及其工作原理的更多信息 此处.您会在备注"部分注意到以下内容:
You can read more about the beforeunload event and how it works here. You'll notice in the "Notes" section that it states the following:
在 Firefox 4 及更高版本中返回的字符串不会显示给用户.相反，Firefox 会显示字符串此页面要求您确认是否要离开 - 您输入的数据可能不会被保存."
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 遵循类似的模式，在此处进行了解释.
Chrome follows a similar pattern, explained here.
IE/Edge 似乎仍然提供指定自定义 beforeunload 消息的能力.可以在此处查看此示例.
IE/Edge still seem to offer the ability to specify a custom beforeunload message. An example of this can be seen here.
这篇关于CanDeactivate 确认消息的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
