संदेश की पुष्टि कर सकते हैं

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

जब रहे (उदा http://localhost:4200/#/test1 से http://localhost:4200/#/test2 है, वहाँ नेविगेट) कहीं अपने कोणीय एप्लिकेशन के भीतर नेविगेट करने की कोशिश कर अपने कस्टम संदेश केवल दिखाया जाएगा। ऐसा इसलिए है क्योंकि CanDeactivate गार्ड केवल आपके कोणीय ऐप के भीतर कोणीय राउटर के माध्यम से किए गए रूट परिवर्तनों के लिए सक्रिय करता है।

जब आपके कोणीय एप्लिकेशन से दूर नेविगेट (जैसे, http://localhost:4200/#/test1 से http://stackoverflow.com पर जाकर, पेज ताज़ा, ब्राउज़र विंडो/टैब, आदि बंद करने), windowbeforeunload घटना (@HostListener('window:beforeunload') एनोटेशन के कारण) को सक्रिय करता है और CanDeactivate गार्ड के बिना, अपने आप पर confirm संवाद को संभालता है। इस मामले में, क्रोम और फ़ायरफ़ॉक्स अपने स्वयं के लंबित परिवर्तन चेतावनी संदेश प्रदर्शित करते हैं।

आप beforeunload ईवेंट और यह कैसे काम करता है here के बारे में और अधिक पढ़ सकते हैं। आप "नोट्स" खंड में ध्यान देंगे कि यह निम्नलिखित राज्यों:

फ़ायरफ़ॉक्स 4 में और बाद में लौटे स्ट्रिंग उपयोगकर्ता को प्रदर्शित नहीं है। इसके बजाए, फ़ायरफ़ॉक्स स्ट्रिंग को प्रदर्शित करता है "यह पृष्ठ आपको यह पुष्टि करने के लिए कह रहा है कि आप छोड़ना चाहते हैं - आपके द्वारा दर्ज किया गया डेटा सहेजा नहीं जा सकता है।"

क्रोम एक समान पैटर्न का पालन करता है, here समझाया गया।

आईई/एज अभी भी कस्टम beforeunload संदेश निर्दिष्ट करने की क्षमता प्रदान करने लगते हैं। इसका एक उदाहरण here देखा जा सकता है।