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?
Here's the code
Guard.
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);
}
}
Component
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;
}
}
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…