我想警告用戶未保存的更改，然后再離開(kāi)我的angular 2應(yīng)用程序的特定頁(yè)面。通常，我會(huì)使用window.onbeforeunload，但不適用于單頁(yè)應(yīng)用程序。我發(fā)現(xiàn)在角度1中，您可以進(jìn)入$locationChangeStart事件confirm為用戶拋出一個(gè)框，但是我沒(méi)有看到任何顯示如何使角度2正常工作的東西，或者該事件是否仍然存在。我也看到過(guò)為ag1提供功能的插件onbeforeunload，但同樣，我還沒(méi)有看到將其用于ag2的任何方式。我希望其他人找到了解決該問(wèn)題的方法；兩種方法都可以很好地達(dá)到我的目的。
3 回答
料青山看我應(yīng)如是
TA貢獻(xiàn)1772條經(jīng)驗(yàn) 獲得超8個(gè)贊
使用來(lái)自stewdebaker的@Hostlistener的示例確實(shí)運(yùn)行良好，但是我對(duì)其進(jìn)行了另一處更改，因?yàn)镮E和Edge在MyComponent類上向最終用戶顯示了canDeactivate（）方法返回的“ false”。
零件：
import {ComponentCanDeactivate} from "./pending-changes.guard";
import { Observable } from 'rxjs'; // add this line
export class MyComponent implements ComponentCanDeactivate {
canDeactivate(): Observable<boolean> | boolean {
// insert logic to check if there are pending changes here;
// returning true will navigate without confirmation
// returning false will show a confirm alert before navigating away
}
// @HostListener allows us to also guard against browser refresh, close, etc.
@HostListener('window:beforeunload', ['$event'])
unloadNotification($event: any) {
if (!this.canDeactivate()) {
$event.returnValue = "This message is displayed to the user in IE and Edge when they navigate without using Angular routing (type another URL/close the browser/etc)";
}
}
}
- 3 回答
- 0 關(guān)注
- 878 瀏覽
添加回答
舉報(bào)
0/150
提交
取消