Wie Sie verhindern, dass die Seite aktualisieren, im Winkel 4

Versuchen Sie die unten Abonnement zu werfen alert-Fenster auf Seite aktualisieren. einige Benutzer-Ereignisse wie klicken Sie einfach auf die Seite, bevor Sie versuchen zu aktualisieren oder das Fenster zu schließen. überprüfen Sie die funktionierende version hier

finden Sie in der offiziellen Dokumentation auf beforeunload

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

  }

InformationsquelleAutor Prithivi Raj

Die Lösung hängt davon ab, warum Sie wollen, um die Seite neu zu laden. Wenn Sie möchten, um es zu verhindern, weil es kann nicht gespeicherten änderungen, die Sie eigentlich verhindern, dass zwei unterschiedliche Verhaltensweisen:

1. Browser-Seite neu zu laden. Sie können dies erreichen, indem erstellen ein HostListener auf die beforeunload event (ähnlich wie Ihr Versuch) wie:

    @HostListener('window:beforeunload', ['$event'])
    beforeUnloadHander() {
        //or directly false
        this.allowRedirect;
    }

1. Winkel-routing ändern (wenn Sie routing): das zu tun, müssen Sie ein Deaktivierungs-guard auf der route, die Sie sperren möchten, gibt es viele Möglichkeiten, aber die meisten schätzen ist die eine, die nutzt ein interface-Implementierung:

I. Die Schnittstelle stellt ein paar der verwendeten Felder in den eckigen Wache zu überprüfen, ob das ändern der router-Pfad:

    import { Observable } from "rxjs";
    import { HostListener } from "@angular/core";

    //see https://scotch.io/courses/routing-angular-2-applications/candeactivate
    //implementing this interface with a component in angular you can implement a candeactivate
    //guard that automatically checks if there is the canDeactivate function and
    //it allows to navigate out of the route or not
    export default interface LockableComponent {
      allowRedirect: boolean;
      canDeactivate(): boolean;
    }

II. Jede Komponente implementiert dieses interface mit der Methode canDeactivate oder die allowRedirect Feld (wiederverwendbar, in der HostListener für das problem #1) und müssen die Rückgabe ein boolescher Wert, der angibt, ob die navigation erlaubt ist oder nicht.

III. Erstellen Sie eine router-Wächter, überprüft diese Komponente Felder für die Deaktivierung:

  canDeactivate(
    component: LockableComponent,
    currentRoute: ActivatedRouteSnapshot,
    currentState: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {
    if (
      (component.allowRedirect === false ||
        (component.canDeactivate && !component.canDeactivate()))
    ) {
      //Angular bug! The stack navigation with candeactivate guard
      //messes up all the navigation stack...
      //see here: https://github.com/angular/angular/issues/13586#issuecomment-402250031
      this.location.go(currentState.url);

      if (
        window.confirm("Sure man?")
      ) {
        return true;
      } else {
        return false;
      }
    } else {
      return true;
    }
  }

III. Legen Sie die canDeactivate router guard in Ihrem Modul.routing.ts-Datei:

const myRoutes: Routes = [
      {
        path: "locked-route-path",
        component: ComponentThatImplementsLockedInterface,
        canDeactivate: [TheCanDeactivateGuardJustMade]
      }
      //...
]

InformationsquelleAutor Giovanni Bertoncelli

Für diese, sollten Sie eine Wache.

in Ihrer routing-Konfiguration-Datei:

const routes: Routes = [
    {
        path: '',
        redirectTo: '/homePage',
        pathMatch: 'full'
    },
    {
        path: 'accueil',
        component: AccueilComponent,
        canDeactivate: [GuardName]
    }]

Dadurch sind Sie ruft Ihren Mann auf der ausgewählten Komponente

Mehr Informationen Hier

In Ihre guard:

@Injectable()
export class CanDeactivateGuard implements CanDeactivate<CanComponentDeactivate> {
  canDeactivate(component: CanComponentDeactivate) {
    return true/false;
  }
}

InformationsquelleAutor Terry Pitz