CanDeactivate confirm message

Question

Zaimplementowałem ochronę CanDeactivate, aby uniknąć opuszczenia strony przez użytkownika podczas przesyłania i działa. Problem polega na tym, że moja wiadomość jest zawsze domyślną wiadomością (w języku holenderskim ze względu na język przeglądarki), a nawet ustawienie samej wiadomości nadal pokazuje to samo domyślne okno confirm. Chciałbym napisać własną wiadomość (w rzeczywistości mam modalny, który chcę pokazać, ale najpierw chciałbym zobaczyć pracę z prostym komunikatem).

Jakieś pomysły, co to może być? Czy czegoś brakuje? Z góry dziękuję!

oto kod

straży.

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);     
     } 
    } 

Komponent

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

własnych wiadomość pojawi się tylko wtedy, gdy próbuje poruszać się gdzie indziej w swoim Kątowymi aplikacji (na przykład przechodząc od http://localhost:4200/#/test1 do http://localhost:4200/#/test2). Dzieje się tak, ponieważ strażnik CanDeactivate aktywuje się tylko w przypadku zmian trasy przeprowadzanych przez router kątowy w aplikacji Angular.

Podczas nawigacji dala od Kątowymi aplikacji (np przechodząc od http://localhost:4200/#/test1 do http://stackoverflow.com, odśwież stronę, zamykając okno przeglądarki/kartę, etc.), zdarzenie windowbeforeunload aktywuje (ze względu na @HostListener('window:beforeunload') adnotacji) i obsługuje samo okno dialogowe confirm bez osłony CanDeactivate. W takim przypadku Chrome i Firefox wyświetlają własne ostrzeżenie o zmianach oczekujących.

Możesz przeczytać więcej o wydarzeniu beforeunload i jak to działa here. Zauważysz w sekcji „Uwagi”, który stwierdza, co następuje:

w Firefox 4 i nowszych zwrócony ciąg nie jest wyświetlany użytkownikowi. Zamiast tego Firefox wyświetla napis "Ta strona prosi o potwierdzenie, że chcesz odejść - dane, które wprowadziłeś, mogą nie zostać zapisane."

Chrome ma podobny wzór, wyjaśnił here.

IE/Krawędź nadal wydają się oferować możliwość określenia własnego beforeunload wiadomość. Przykład tego można zobaczyć here.