beforeunload 事件之前的 Angular8 IFrame

Question

我有一个 angular 应用程序，它是在其中托管子应用程序的主应用程序。子应用程序也是角度应用程序。我加载子应用程序的方式是通过 Iframes。

子应用程序显示为一个列表，当我单击一个选项卡时，该应用程序被加载。当我对应用程序中的数据进行一些更改时，如果我单击另一个子选项卡，我想显示一条警告消息，指出“更改将丢失”。我可以通过使用 beforeunload 事件来实现它，如下所示。我可以检查是否有任何未保存的更改并显示警告弹出窗口。

  @HostListener('window:beforeunload', ['$event'])
  unloadNotification($event: any) {
      if (**my logic here) {
          $event.returnValue =true;
      }
  }

唯一的问题是，当我单击另一个子选项卡时，主机应用程序会突出显示该子选项卡，然后显示警告弹出窗口。如果我单击弹出窗口上的停留按钮，我可以在我想要的子选项卡上，但在主机应用程序上，另一个子选项卡会突出显示。因此，如果我想留在当前子选项卡上，我正在尝试寻找一种不突出显示其他选项卡的方法。在卸载之前的东西。

Answer 1

我的理解是，您必须更新一个现有项目，该项目以这样一种方式构建，即利用该beforeunload事件来实现类似于称为路由保护的 Angular 功能的功能。您是否加载选定的 iframe 取决于您在beforeunload事件的帮助下实现的逻辑。您似乎不喜欢更改此实现，这就是为什么要寻求一种解决方案来满足您的要求，并应用类似于另一个窗口事件的类似方法。

如果我的理解是正确的，您需要重构这个实现，以便“保护”发生取决于“主机应用程序”的内部工作，它实际上必须首先放在那里。您出现的问题是因为当 iframe 的卸载事件被取消时，主机应用程序的取消选项卡已被选中。

简而言之，这似乎是在您选项卡的选择事件中处理的。我的回答可能会也可能不会提出您会接受的解决方案，因为我们没有所有详细信息，例如您使用哪种组件，我只能提供一个伪解决方案：

在导航选项卡的 ui 逻辑发生的组件内：

onTabSelected(selectedIndex) {
    if (..your logic here) {
        loadIframe(selectedIndex);
        highlightTab(selectedIndex);
    }
}