在更改頁面上的標籤之前警告未保存更改的用戶

在我的Angular2頁面上，我將數據拆分爲3個不同的選項卡。這3個選項卡顯示來自同一模型的3個不同部分的數據。每個選項卡都有保存數據選項。如果他在不更改數據的情況下轉到其他選項卡，我將如何警告用戶未保存的更改？在更改頁面上的標籤之前警告未保存更改的用戶

請注意，此頁面有一個URL，並且每個選項卡都沒有特定的路由器。

我真的需要每個選項卡和生命週期回調CanDeactivate來處理這個？還有其他選擇嗎？我不想創建單獨的路由器，因爲這三個選項卡位於同一頁面上。

2017-07-19 Ani

創建示例plunker –

看一看這個[**介質後**]（https://medium.com/@aravind_12433/load- modal-component-dynamic-in-angular-5fda8e1dc3e7） – Aravind

我假設您可以對選項卡上的點擊事件做出反應？這似乎是添加代碼以確定用戶是否需要首先保存更改的最可能的地方。

我做了一個示例編輯應用程序與選項卡，但我允許更新任何選項卡不保存更改第一次。應用程序確實要求用戶在導出編輯之前進行保存。如果你有興趣，你可以在這裏找到它的代碼：https://github.com/DeborahK/Angular-Routing/tree/master/APM-Final

2017-07-19 17:06:43 DeborahK

你對每個標籤都有單獨的路由器嗎？ – Ani

是的。所以我的例子可能不適用於你在做什麼。 – DeborahK

回答