當Angular 2中的表單髒污時，防止關閉瀏覽器選項卡

如何防止在Angular 2中的表單髒污時關閉瀏覽器選項卡？當Angular 2中的表單髒污時，防止關閉瀏覽器選項卡

我的HTML體內含有一種成分：含有路由器導航和路由器出口

<body> 
    <my-app>Loading, please wait...</my-app> 
    </body>

：

<nav> 
(...) 
</nav> 
<router-outlet></router-outlet>

當路由器導航到編輯頁面，我有某種形式存在：

<form #myForm="ngForm"> 
    <button pButton type="text" label="Save" (click)="onSave()" [disabled]="!myForm.valid || myForm.pristine"></button> 
    </form>

現在，如果表格不是'原始'，我想要求確認時用戶試圖關閉瀏覽器選項卡：

window.onbeforeunload = function() { 
    if (form.dirty) { 
    return "You have unsaved data changes. Are you sure to close the page?" 
    } 
}

如何從此處以規範方式訪問Angular形式的髒狀態？我可以在每個字段上註冊一個事件來改變字段，並設置全局髒標誌，但是我必須在每個導航的每個導航欄上放置該代碼，然後維護該代碼，以便消息保持一致。有沒有其他方法可以檢查頁面上是否有角度表單，處於髒狀態？

來源

2016-11-21 9ilsdx 9rvj 0lo

也許

@HostListener('window:beforeunload', ['$event']) 
handleBeforeUnload(event) { 
    if (connected) { 
    return "You have unsaved data changes. Are you sure to close the page?" 
    } 
}

來源

2016-11-21 12:06:46

和我有#ngForm，可以是骯髒的每個組件定義@HostListener？ –

無論如何，添加到我的組件的@HostListener顯示爲灰色（未使用的代碼），並且在關閉窗口時不會調用。 –

對不起，你是對的。我忘了添加'window：'（查看更新後的問題）。我不知道你的「灰色顯示」。它不直接調用。 –

只要您可以使用jQuery來獲取ng-form狀態。

@HostListener('window:beforeunload', ['$event']) 
beforeUnloadHandler(event) { 
    if($('form').hasClass('ng-touched')) { //You can check with ng-dirty based on your requirements. 
     let confirmMessage = 'You have unsaved data changes. Are you sure to close the page?' 
     event.returnValue = confirmMessage; 
     return confirmMessage; 
    } 

}

在我的情況下，如果form已被觸摸，我只是顯示警告對話框。

來源

2017-02-07 09:33:21

試試這個指令https://github.com/extremeprog-com/ng-prevent-navigation。

所以它應該是簡單的

<div ng-prevent-navigation="vm.pageShouldBeReloaded" 
    ng-prevent-navigation-text="Payment form has unsaved changes. 
     If you leave the page now you will lose those changes." 
></div>

來源

2017-02-16 21:35:59 myfoxtail

我不認爲它是爲Angular2 – Francesco

當Angular 2中的表單髒污時，防止關閉瀏覽器選項卡

回答

相關問題