卸载前的主机侦听器无法在 Angular 应用程序中导航

Question

我希望在应用程序的主页上显示一个标有“设置已成功保存”的横幅，但在用户离开主页后停止显示。我的解决方案是在保存设置页面上在 SESSION_STORAGE 中设置一个变量 settingsSavedSuccessively 。保存设置的过程会将用户带回到主页，其中横幅使用 ngIF 来检查设置是否已成功保存。我想我可以在触发 window beforeunload 事件时删除该变量。

我尝试了两种方法来实现这一点。首先是在主页的构造函数中添加它

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

另一种是在主页的TypeScript底部添加这个HostListener方法

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

刷新页面将导致其中任何一个触发。但是，如果我离开家，在应用程序内，似乎未触发 beforeunload。我已经在 Google Chrome 和 Firefox 上对此进行了测试。我假设这与“单页 Web 应用程序”有关。

stewdebaker 在类似问题下的回答意味着，如果“配置正确”，Hostlistener 应该能够“同时进行应用内导航和外部导航”。有谁知道我是否需要配置一些东西才能使 HostListener 和 beforeunload 按照我希望的方式运行？我是否误解了steedbeaker的回答？

我的 Angular CLI 版本是 18.0.6，以防相关。

Answer 1

您可以使用角度生命周期钩子方法

ngOnDestroy

，而不是使用hostlistner来实现此目的。只需在您的组件中执行此操作即可：

选项1：

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

或 选项2：

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

选项 2 对您来说是一个不错的选择，因为您在构造函数中注入 sessionStorage。