在更改页面上的选项卡之前警告用户未保存的更改答案

【问题标题】：Warn user of unsaved changes before changing tabs on a page在更改页面上的选项卡之前警告用户未保存的更改
【发布时间】：2017-07-19 16:59:49
【问题描述】：

在我的 Angular2 页面上，我将数据拆分为 3 个不同的选项卡。这 3 个选项卡显示来自同一模型的 3 个不同部分的数据。每个选项卡都有保存数据选项。如果用户在未更改数据的情况下转到其他选项卡，我将如何警告用户未保存的更改？

请注意，此页面只有一个 url，并且每个选项卡没有特定的路由器。

我真的需要为每个选项卡和生命周期回调 CanDeactivate 单独的路由器来处理这个吗？还有其他选择吗？我不想创建单独的路由器，因为这 3 个选项卡在同一页面上。

【问题讨论】：

【解决方案1】：

我假设您可以对标签上的点击事件做出反应？这似乎是最有可能添加代码以确定用户是否进行了需要首先保存的更改的地方。

我做了一个带有标签的示例编辑应用程序，但我允许在不先保存更改的情况下更新任何标签。该应用确实要求用户在退出编辑之前进行保存。如果你有兴趣，你可以在这里找到它的代码：https://github.com/DeborahK/Angular-Routing/tree/master/APM-Final

【讨论】：