角度4の終了時に確認を実行する方法は？

Question

終了確認のコンポーネントを実装する方法を知りたいので、ページをリフレッシュするか、タブまたはウィンドウまたは画面から離れるときに確認を実行できるようにしてください。ユーザーがOKをクリックすると、 NOをクリックすると、彼は同じ画面に留まりますか？私はここで使用しています

コードは次のとおりです。

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> 

間違いがどこにあるか分かりません。私はこの機能を実行することができません。誰か助けてくれますか？あなたが離れて任意のroute.For例から移動しようとして、あなたは、あなたのフォームを使用している場合

Answer 1

あなたはSOこの https://scotch.io/courses/routing-angular-2-applications/candeactivate

を参照することができ、すぐに実行されますルート.Thisに角度を非アクティブガードを使用することができますフォームをガードに渡してフォームの状態を確認することができます。汚れていると変更されたことを示すダイアログが表示されます。

Answer 2

ng-formの中にディレクティブを追加し、以下のようにconfirmディレクティブのプロパティ。私たちは本当にたとえば、ルート（から移動したい場合は、我々が保存されていない失うことからユーザーを防ぐためにしたい場合は、私たちに決定する可能性を与えCanDeactivateガードを使用することができ、これはあなたに

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

Answer 3

を助けることを願っていますフォームに記入して、誤ってボタンをクリックしてプロセスをキャンセルすると変更されます）。

CanDeactivateガードはまた、活性成分のインスタンスへのアクセスを持っているので、私たちはそこに変更されていると、条件付きで休暇前にユーザーに確認をお願いしているかどうかを確認hasChanges（）を実装することができます。 CanDeactivateComponentは、コンポーネントが変更を検出したかどうかを示すboolean値を返す（以前のモデルと現在のモデルを比較したフォームの汚れた状態を確認できます）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; 
    } 
} 

、これは非常にですが簡単な実装では、前の例では見なかったことが1つあります。 CanDeactivateは一般的なものを使用しているため、非アクティブ化するコンポーネントタイプを指定する必要があります。

canDeactivate（）を実装します。必要に応じて内部でAngularのルーターによって呼び出されます。

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

最終、角上の他のすべてのサービスと同様に、このガードはそれに応じて登録する必要があります

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

私たちは、私たちは、洗練されたユースケースを実装することができます単一のルートを、保護複数のガードを持つことができ、さまざまなチェックの連鎖が必要です。