web-dev-qa-db-fra.com

Comment empêcher l'actualisation de la page dans angular 4

Je veux empêcher l'actualisation de la page par partout.

J'ai essayé le code ci-dessous 

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { CommonServices } from '../services/common.service'; 

@Component({
  selector: 'app-review-prescription',
  templateUrl: './review-prescription.component.html',
  styleUrls: ['../../assets/css/prescriptionView.css'],
  providers:[
    CommonServices
  ]
})
export class ReviewPrescriptionComponent implements OnInit {
    constructor(
        private commonServices:CommonServices,
        private router:Router
        ){}
    ngOnInit(){
      window.onbeforeunload = function(event) {
        return 'By refreshing this page you may lost all data.';
      }
  }

}

J'ai essayé ceci sur ngOnChanges(), ngOnInit(), ngOnDestroy() même en dehors de la classe de composant (désolé illogique) mais rien ne fonctionne?

J'ai besoin d'une solution dans Angular ou JavaScript pas dans jQuery.

Merci.

javascriptangularangular-routing
4
RajnishCoder

Essayez l’abonnement ci-dessous pour lancer la fenêtre d’alerte lors de l’actualisation de la page. faire des événements utilisateur comme cliquer sur la page avant d'essayer d'actualiser ou de fermer la fenêtre. vérifier la version de travail ici

voir la documentation officielle avant le téléchargement

ngOnInit(){
     window.addEventListener("beforeunload", function (e) {
  var confirmationMessage = "\o/";
console.log("cond");
  e.returnValue = confirmationMessage;     // Gecko, Trident, Chrome 34+
  return confirmationMessage;              // Gecko, WebKit, Chrome <34
});

  }
5
Prithivi Raj

Vous pouvez essayer ça.

@HostListener('window:beforeunload', ['$event'])
beforeunloadHandler(event) {
    alert('By refreshing this page you may lost all data.');
}

Assurez-vous d'inclure ceci dans la classe. 

0
Sabarish Vasudevan