web-dev-qa-db-ja.com

Angular 6：ページを離れる際の簡単な確認

簡単な確認ウィンドウを作成する必要があり、追加のアクション（フォームのファイルアップロードがフィールドでなくなるまで待つなど）を使用してそれを行う方法の例をたくさん見ました。しかし、ユーザーが現在のページから離れたいときに表示するために、デフォルトのテキスト（下の写真のように）でデフォルトの確認ウィンドウを作成する必要があります。そして、before unloadイベントの処理内でどのロジックを証明する必要があるのか​​を完全に理解することはできません。

image example

最近、質問が重複している場合は申し訳ありませんが、解決策が見つかりませんでした。ので、私は持っています：

example.guard.ts

export interface CanComponentDeactivate {
    canDeactivate: () => Observable<boolean> | boolean;
}

@Injectable()
export class ExampleGuard implements CanDeactivate<CanComponentDeactivate> {

    constructor() { }

    canDeactivate(component: CanComponentDeactivate): boolean | Observable<boolean> {
        return component.canDeactivate() ?
            true :
            confirm('message'); // <<< does confirm window should appear from here?
    }
}

example.component.ts

export class ExampleComponent implements CanComponentDeactivate {

    counstructor() { }

    @HostListener('window:beforeunload', ['$event'])
        canDeactivate($event: any): Observable<boolean> | boolean {
            if (!this.canDeactivate($event)) {
                // what should I do here?
            }
        }
}

コードのサンプルを提供していただければ素晴らしいと思いますが、どんな種類の助けにも感謝します。

angulartypescriptonbeforeunloadangular-router-guards
3
hofshteyn

beforeunloadのwindowネイティブイベントとcanDeactivateガードを区別する必要があります。タブ/ウィンドウを閉じようとすると、最初のものがトリガーされます。そのため、トリガーされたときにconfirm(...)ユーザーとevent.preventDefault()を実行して、タブ/ウィンドウを閉じることをキャンセルできます。

CanDeactivateガードについて話すと、現在のルートを非アクティブ化できるかどうかを示すブール値のobservable/promise/plain-valueを返す必要があります。

したがって、2つのメソッド（1つはbeforeunload用、もう1つはガード用）を分離することをお勧めします。必要に応じて、ネイティブ確認だけでなくカスタムモーダルウィンドウを使用するように動作を変更すると、beforeunloadのデフォルトのイベントハンドラーは同期コードを処理するため機能しません。したがって、beforeunloadの場合、confirmを使用して、ユーザーにページを離れないように要求することができます。

_loading = true;
@HostListener('window:beforeunload', ['$event'])
canLeavePage($event: any): Observable<void> {
  if(this.loading && confirm('You data is loading. Are you sure you want to leave?')) {
    $event.preventDefault();
  }
}
_

一方、Guardは、ブール値（またはPromise、またはObservable）が返されることを望んでいます。したがって、ここでは、条件の結果を返すことができます。

_canDeactivate(): boolean {
  return this.loading && confirm('You data is loading. Are you sure you want to leave?');
}

_

CanDeactivateガードでは、return component.canDeactivate()のように使用されます。

5
Danil Gudz