卸载事件前的Angular8 IFrame

Question

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

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

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

唯一的问题是，当我单击另一个子选项卡时，主机应用程序会高亮显示该子选项卡，然后显示警告弹出。如果我点击弹出窗口上的停留按钮，我可以在我想要的子选项卡上，但是在主机应用程序上，另一个子选项卡会被高亮显示。因此，如果我想保持在当前的子选项卡上，那么我试图找到一种不突出显示其他选项卡的方法。在卸货之前。

Answer 1

儿童应用程序

const origin = this.getCurrentHostOrigin();
if (cancelSwitchTab) {
    window.parent.postMessage({}, origin); 
}

在主机应用程序中：

this.renderer.listen(this.windowsRef.nativeWindow, 'message', event => {
  const message = event.data;
  *** your logic to revert highlight to current tab ***
});

Answer 2

我的理解是，您必须更新一个现有的项目，该项目的构造方式是使用beforeunload事件来实现类似于称为路由保护的角度特性。根据在beforeunload事件帮助下实现的逻辑，可以加载或不加载所选的iframe。您似乎不喜欢改变这个实现，这就是为什么要寻找一个解决方案来满足您的需求，应用类似于另一个窗口事件的方法。

如果我的理解是正确的，那么您需要重构这个实现，以便根据“主机应用程序”的内部工作情况进行“守护”，而“主机应用程序”实际上首先必须在内部工作。出现此问题的原因是，在取消iframe的卸载事件时，主机应用程序的“取消”选项卡已经被选中。

简而言之，这似乎是在选项卡的选择事件中处理的。我的回答可能会或可能不会提出一个您会接受的解决方案，因为我们没有像您使用的组件那样的所有细节，所以我只能提供一个伪解决方案：

在进行导航选项卡的ui逻辑的组件中：

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

Answer 3

没有像beforeUnload之前那样的事件。两个应用程序，即主机和子程序可以通过postMessage进行通信。因此，在beforeUnload事件中，您可以向子应用程序发送一个postMessage以突出显示现有选项卡。例如：-假设您在变量名child1中引用了子窗口。

  child1.postMessage('{'tabId': 'tab1'}');

您的子应用程序可以接收此消息并用标识符tab1突出显示该选项卡。