javascript - Hur sätter jag $event returnValue-egenskapen till null i typeScript

Jag använder window.beforeunload-händelsen för att fånga datamodifieringar och varna användaren om de behöver spara data. Enligt Mozillas online-dokumentation, om jag sätter händelsens returvärde till null, kommer jag inte att få en användaruppmaning och händelsen hanteras tyst.

När denna händelse returnerar (eller sätter returnValue-egenskapen till) ett värde annat än null eller undefined, uppmanas användaren att bekräfta sidans avladdning.

Men jag har försökt sätta returvärdet till null och undefined och det behandlas som strängrepresentationerna, inte de faktiska värdena. Koden nedan visar min händelsehanterare.

@HostListener('window:beforeunload',['$event'])
  onUnload(e){

  e.returnValue = undefined;
  if(e.returnValue == "undefined"){
    console.log("Treated like string");
  }
  if(e.returnValue == undefined){
    console.log("treated like null value");
  }

}

Det första if-villkoret utlöses i alla fall oavsett om jag försöker med undefined eller null. Jag har bekräftat att det andra if-uttrycket inte är sant.

Jag får inte samma beteende om jag skapar en ny variabel och tilldelar dess värde. Det ser ut som om detta är någon slags begränsning på returnValue-egenskapen för händelsen. Finns det en enkel lösning på detta problem.

Svar #1

Från MDN webb-dokument:

Om en sträng tilldelas returvärdeshändelseegenskapen visas en dialogruta som ber användaren att bekräfta att lämna sidan (se exempel nedan). Vissa webbläsare visar den returnerade strängen i dialogrutan, men andra visar sitt eget meddelande. Om inget värde anges behandlas händelsen tyst.

Vänligen, kolla MDN webbdokumentation för mer information om beforeunload-händelsen.

  public get hasUnsavedData(): boolean {
    // some logic
    return false;
  }

  @HostListener('window:beforeunload',['$event'])
  onUnload(e){
    if (this.hasUnsavedData) {
      e.returnValue = 'You have unsaved changes...';
    }
    return;
  }

Svar #2

Lägger upp här eftersom detta är för långt för att inkluderas i en kommentar.

Jag har fått detta att fungera baserat på förslaget från Explosion Pills ovan. Jag försöker inte ställa in ett eget meddelande. Den förvirrande punkten här är att i debuggern visas den oinställda returnValue som den tomma strängen "" och inte som null-värdet. Därför försökte jag sätta den till null för att uppfylla MDN-kravet. Detta är vad som inte fungerade som jag förklarade ovan. Det uppenbart nödvändiga beteendet är att sätta returnValue till vilken sträng som helst om du vill få dialogrutan och INTE sätta returvärdet utan bara kalla på return(null) om du inte vill ha dialogrutan. Detta är förvirrande eftersom det är en obalanserad funktion. Att kalla return("true") kommer inte att utlösa dialogrutan. Du måste uttryckligen sätta egenskapen returnValue för att utlösa dialogrutan och du får INTE sätta detta värde om du inte vill utlösa dialogrutan. Jag kör detta i Angular och använder @HostListener, så detta kan vara en bieffekt av den miljön.