javascript - Hostlistener beforeunload not working for navigation within Angular application - Stack Overflow

admin管理员组

文章数量:1122832

I want a banner that says "Settings saved successfully" to display on the home page of my Angular application, but for it to stop displaying after the user navigates away from the home page. My solution to this, is on the save-settings page set a variable settingsSavedSuccesfully in SESSION_STORAGE. The process of saving the settings takes the user back to the home page where the banner uses ngIF to check for settingsSavedSuccessfully. I thought I could then remove that variable when the window beforeunload event is triggered.

I have attempted two ways of implementing this. First is by adding it within the constructor of the home page

constructor(
    ...
    @Inject(SESSION_STORAGE) private sessionStorage: StorageService,
  ) {
    window.addEventListener("beforeunload", (event) => {
      this.sessionStorage.remove("settingsSavedSuccesfully");
    });
  }

The other is by adding this HostListener method at the bottom of the home page's TypeScript

@HostListener("window:beforeunload", ["$event"])
  onPageClose(): void {
    this.sessionStorage.remove("settingsSavedSuccesfully");
  }

Refreshing the page will cause either of these to trigger. However, if I navigate away from home, within the application, it seems like beforeunload is not triggered. I have tested this on Google Chrome and on Firefox. I am assuming this is something to do with it being a "single-page Angular web application".

stewdebaker's answer under a similar question implies that if things are "configured correctly" the Hostlistener should be able to trigger from "both in-app and external navigation at the same time". Does anyone know if there's something I need to configure to make HostListener and beforeunload behave in the way I want them to? Did I misunderstood stewdbebaker's answer?

My Angular CLI is version 18.0.6 in case that's relevant.

I want a banner that says "Settings saved successfully" to display on the home page of my Angular application, but for it to stop displaying after the user navigates away from the home page. My solution to this, is on the save-settings page set a variable settingsSavedSuccesfully in SESSION_STORAGE. The process of saving the settings takes the user back to the home page where the banner uses ngIF to check for settingsSavedSuccessfully. I thought I could then remove that variable when the window beforeunload event is triggered.

I have attempted two ways of implementing this. First is by adding it within the constructor of the home page

constructor(
    ...
    @Inject(SESSION_STORAGE) private sessionStorage: StorageService,
  ) {
    window.addEventListener("beforeunload", (event) => {
      this.sessionStorage.remove("settingsSavedSuccesfully");
    });
  }

The other is by adding this HostListener method at the bottom of the home page's TypeScript

@HostListener("window:beforeunload", ["$event"])
  onPageClose(): void {
    this.sessionStorage.remove("settingsSavedSuccesfully");
  }

Refreshing the page will cause either of these to trigger. However, if I navigate away from home, within the application, it seems like beforeunload is not triggered. I have tested this on Google Chrome and on Firefox. I am assuming this is something to do with it being a "single-page Angular web application".

stewdebaker's answer under a similar question implies that if things are "configured correctly" the Hostlistener should be able to trigger from "both in-app and external navigation at the same time". Does anyone know if there's something I need to configure to make HostListener and beforeunload behave in the way I want them to? Did I misunderstood stewdbebaker's answer?

My Angular CLI is version 18.0.6 in case that's relevant.

• javascript
• angular
• typescript
• onbeforeunload

Share Improve this question Follow edited Dec 17, 2024 at 4:55 marc_s 754k183183 gold badges1.4k1.4k silver badges1.5k1.5k bronze badges asked Nov 22, 2024 at 20:20 LukeC92LukeC92 13311 silver badge1111 bronze badges 1

• "external navigation" I think means to another site in this context. A single page app is a single page, so no "unload" takes place when navigating within the SPA. Doesn't seem like session storage is necessary here. Just set a bool when changing pages within angular and put "Settings saved succesfully" in an ngIf. – browsermator Commented Nov 22, 2024 at 20:34

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

Instead of using hostlistner to serve this purpose, you can use angular lifecycle hook method ngOnDestroy. Just do this in your component:

Option 1:

  public ngOnDestroy(): void {
    console.log("Page is closing");
    sessionStorage.removeItem("settingsSavedSuccesfully");
  }

OR Option 2:

  public ngOnDestroy(): void {
    this.sessionStorage.remove("settingsSavedSuccesfully");
  }

Option 2 is a good choice for you as you are injecting sessionStorage in constructor.

本文标签： javascriptHostlistener beforeunload not working for navigation within Angular applicationStack Overflow