如何實現在角度4退出確認？

-1

我想知道如何實現確認退出組件，以便在頁面刷新或離開選項卡或窗口或屏幕上我可以執行退出方法確認，以便如果用戶單擊OK他將離開屏幕和點擊NO他會保持在同一屏幕上？我在這裏使用如何實現在角度4退出確認？

代碼是：

import { Component, OnInit, Input, Output, HostListener } from '@angular/core'; 
@Component({ 
    selector: 'confirmonexit', 
    templateUrl: './confirm-on-exit.html' 
}) 
export class ConfirmOnExitComponent { 
    @Input() isDirty: boolean; 
    public isConfirmed: boolean = false; 
    @HostListener('window:beforeunload',['$event']) beforeUnloadHander() { 
     if (this.isDirty) { 
      let msg: string = 'Are you sure you want to navigate without saving the entered data on the screen ? ' 
      if (confirm(msg)) { 
       this.isDirty = false; 
       this.isConfirmed = false;   
      } else { 
       this.isDirty = true; 
       event.preventDefault(); 
      } 
     } 
    } 
} 

appModule added - this component in declarations 
html added = <confirmonexit [isDirty]="CreateEditForm.form.dirty"></confirmonexit>

我不知道在哪裏的錯誤是。我無法執行此功能。任何人都可以幫我嗎？

來源

2017-07-04 Lovepreet Singh

你可以使用上的路線。這角停用後衛，將立即執行，當你試圖導航到任何route.For例如遠離你可以參考這個 https://scotch.io/courses/routing-angular-2-applications/candeactivate

因此，如果您使用的是形式，那麼你可以將表單傳遞給警衛，然後檢查表單狀態。如果表示它已被更改，那麼您可以向用戶顯示確認對話框

來源

2017-07-04 05:40:55

我們不能使用這個現有的代碼？我的意思是@HostListener（'window：beforeunload'，['$ event']）。 –

任何想法??想要幫助。 –

您提到的方法只在用戶離開窗口時才起作用，但如果用戶導航到其他選項卡，則該方法將不會執行，因爲您正在單個頁面應用程序上工作，您只有一個窗口 –

您可以在ng表單中添加指令並將確認指令屬性如下。我希望這將幫助你

<form name="FormName"> 
      <confirm-exit is-dirty="FormName.$dirty"></confirm-exit> 
<form>

來源

2017-07-13 04:48:14 Arun

您可以使用CanDeactivate後衛，讓我們有可能來決定，如果我們真的想從路徑（例如導航路程，如果我們想阻止我們的用戶丟失未保存填寫表格時發生變化，並意外點擊按鈕取消該過程）。

的CanDeactivate後衛也先後獲得了活性成分的實例，這樣我們就可以實現hasChanges（）是檢查是否已經出現了變化，並有條件地請假前的用戶確認。在以下示例中，CanDeactivateComponent實現了方法hasChanges（）返回布爾值，指示組件是否檢測到任何更改（我們可以檢查比較其先前模型和當前模型的表單的髒狀態）。 CanDeactivate後衛的實現類似於CanActivate後衛implelementaion（我們可以創建一個函數，或實現CanDeactivate接口的類）：

import { CanDeactivate } from '@angular/router'; 
import { CanDeactivateComponent } from './app/can-deactivate'; 

export class ConfirmDeactivateGuard implements CanDeactivate<CanDeactivateComponent> 
{ 
    canDeactivate(target: CanDeactivateComponent) 
    { 
    if(target.hasChanges()){ 
     return window.confirm('Do you really want to cancel?'); 
    } 
    return true; 
    } 
}

雖然，這是一個非常瑣碎的實現，有一件事我們在前面的例子中沒有看到。 CanDeactivate使用泛型，所以我們需要指定我們想要停用的組件類型。

我們實現了一個方法canDeactivate（），如果需要的話，由Angular路由器在內部調用。

{ 
    path: '', 
    component: SomeComponent, 
    canDeactivate: [ConfirmDeactivateGuard] 
}

最後，像角的所有其他服務，這個後衛需要進行相應的登記：

@NgModule({ 
    ... 
    providers: [ 
    ... 
    ConfirmDeactivateGuard 
    ] 
}) 
export class AppModule {}

我們可以有多個守衛保護單點的路線，這有助於我們實現複雜的用例，其中需要一系列不同的檢查。

來源

2018-01-23 14:32:14

如何實現在角度4退出確認？

回答

相關問題