我有一个角度应用程序，它是在其中托管子应用程序的主要应用程序。子应用程序也是角度应用程序。我加载子应用程序的方式是通过iframe。
子应用程序显示为列表，当我单击选项卡时，该应用程序已加载。当我对应用程序中的数据进行某些更改时，如果单击另一个子选项卡，我想显示一条警告消息，指出“更改将丢失”。我可以通过使用如下的beforeunload事件来实现它。我可以检查是否有未保存的更改并显示警告弹出窗口。
@HostListener('window:beforeunload', ['$event'])
unloadNotification($event: any) {
if (**my logic here) {
$event.returnValue =true;
}
}
唯一的问题是，当我单击另一个子选项卡时，主机应用程序突出显示该子选项卡，然后显示警告弹出窗口。如果单击弹出窗口上的停留按钮，则可以位于所需的子选项卡上，但在主机应用程序上，其他子选项卡将突出显示。因此，如果我想保留在当前子选项卡上，那么我想尝试一种不突出其他选项卡的方法。卸载前的东西。
[我的理解是，您必须更新现有的项目，该项目的构建方式必须使beforeunload事件用于实现类似于Angular功能（称为路由防护）的功能。您是否加载所选的iframe，具体取决于在beforeunload事件的帮助下实现的逻辑。您似乎不喜欢更改此实现，这就是为什么使用类似其他窗口事件的类似方法来寻求一种满足您要求的解决方案。
如果我的理解是正确的，则需要重构此实现，以便根据“主机应用程序”的内部工作情况真正进行“保护”。之所以出现您的问题，是因为在取消iframe的卸载事件时，已经选择了主机应用程序的“取消”标签。
简而言之，这似乎是在选项卡的选择事件中处理的。我的答案可能会也可能不会建议您接受的解决方案，因为我们没有像您使用的组件适合的所有详细信息，所以我只能提出一个伪解决方案：
在导航标签的ui逻辑所在的组件内：
onTabSelected(selectedIndex) {
if (..your logic here) {
loadIframe(selectedIndex);
highlightTab(selectedIndex);
}
}
Localstorage在相同的浏览器中的不同标签和应用程序中工作。如果要使主机应用程序和子应用程序都执行相同的操作，则可以从localStorage进行组织。