Peringatkan pengguna tentang perubahan yang belum disimpan sebelum meninggalkan halaman

Saya ingin memperingatkan pengguna tentang perubahan yang belum disimpan sebelum mereka meninggalkan halaman tertentu di aplikasi sudut 2 saya. Biasanya saya akan menggunakan window.onbeforeunload, tetapi itu tidak berfungsi untuk aplikasi satu halaman.

Saya telah menemukan bahwa di sudut 1, Anda dapat menghubungkan ke $locationChangeStartacara untuk mengeluarkan confirmkotak untuk pengguna, tetapi saya belum melihat apa pun yang menunjukkan cara membuat ini berfungsi untuk sudut 2, atau jika acara itu bahkan masih ada . Saya juga telah melihat plugin untuk ag1 yang menyediakan fungsionalitas untuk onbeforeunload, tetapi sekali lagi, saya belum melihat cara untuk menggunakannya untuk ag2.

Saya berharap orang lain telah menemukan solusi untuk masalah ini; metode mana pun akan bekerja dengan baik untuk tujuan saya.

Router menyediakan callback siklus hidup CanDeactivate

untuk lebih jelasnya lihat tutorial penjaga

class UserToken {}
class Permissions {
  canActivate(user: UserToken, id: string): boolean {
    return true;
  }
}
@Injectable()
class CanActivateTeam implements CanActivate {
  constructor(private permissions: Permissions, private currentUser: UserToken) {}
  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean>|Promise<boolean>|boolean {
    return this.permissions.canActivate(this.currentUser, route.params.id);
  }
}
@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: 'team/:id',
        component: TeamCmp,
        canActivate: [CanActivateTeam]
      }
    ])
  ],
  providers: [CanActivateTeam, UserToken, Permissions]
})
class AppModule {}

asli (RC.x router)

class CanActivateTeam implements CanActivate {
  constructor(private permissions: Permissions, private currentUser: UserToken) {}
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):Observable<boolean> {
    return this.permissions.canActivate(this.currentUser, this.route.params.id);
  }
}
bootstrap(AppComponent, [
  CanActivateTeam,
  provideRouter([{
    path: 'team/:id',
    component: Team,
    canActivate: [CanActivateTeam]
  }])
);

Untuk juga melindungi penjaga dari penyegaran browser, menutup jendela, dll. (Lihat komentar @ ChristopheVidal untuk jawaban Günter untuk detail tentang masalah ini), saya merasa terbantu untuk menambahkan @HostListenerdekorator ke canDeactivateimplementasi kelas Anda untuk mendengarkan beforeunload windowacara tersebut. Jika dikonfigurasi dengan benar, ini akan melindungi dari navigasi dalam aplikasi dan eksternal pada saat yang bersamaan.

Sebagai contoh:

Komponen:

import { ComponentCanDeactivate } from './pending-changes.guard';
import { HostListener } from '@angular/core';
import { Observable } from 'rxjs/Observable';

export class MyComponent implements ComponentCanDeactivate {
  // @HostListener allows us to also guard against browser refresh, close, etc.
  @HostListener('window:beforeunload')
  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 dialog before navigating away
  }
}

Menjaga:

import { CanDeactivate } from '@angular/router';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';

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

@Injectable()
export class PendingChangesGuard implements CanDeactivate<ComponentCanDeactivate> {
  canDeactivate(component: ComponentCanDeactivate): boolean | Observable<boolean> {
    // if there are no pending changes, just allow deactivation; else confirm first
    return component.canDeactivate() ?
      true :
      // NOTE: this warning message will only be shown when navigating elsewhere within your angular app;
      // when navigating away from your angular app, the browser will show a generic warning message
      // see http://stackoverflow.com/a/42207299/7307355
      confirm('WARNING: You have unsaved changes. Press Cancel to go back and save these changes, or OK to lose these changes.');
  }
}

Rute:

import { PendingChangesGuard } from './pending-changes.guard';
import { MyComponent } from './my.component';
import { Routes } from '@angular/router';

export const MY_ROUTES: Routes = [
  { path: '', component: MyComponent, canDeactivate: [PendingChangesGuard] },
];

Modul:

import { PendingChangesGuard } from './pending-changes.guard';
import { NgModule } from '@angular/core';

@NgModule({
  // ...
  providers: [PendingChangesGuard],
  // ...
})
export class AppModule {}

CATATAN : Seperti yang ditunjukkan oleh @JasperRisseeuw, IE dan Edge menangani beforeunloadacara secara berbeda dari browser lain dan akan menyertakan kata falsedalam dialog konfirmasi saat beforeunloadacara diaktifkan (misalnya, browser menyegarkan, menutup jendela, dll.). Menavigasi dalam aplikasi Angular tidak terpengaruh dan akan menampilkan pesan peringatan konfirmasi yang Anda tunjuk dengan benar. Mereka yang perlu mendukung IE / Edge dan tidak ingin falsemenampilkan / menginginkan pesan yang lebih mendetail di dialog konfirmasi saat beforeunloadacara diaktifkan mungkin juga ingin melihat jawaban @ JasperRisseeuw untuk mengatasinya.

Contoh dengan @Hostlistener dari stewdebaker bekerja dengan sangat baik, tetapi saya membuat satu perubahan lagi karena IE dan Edge menampilkan "false" yang dikembalikan oleh metode canDeactivate () pada kelas MyComponent kepada pengguna akhir.

Komponen:

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)";
    }
  }
}

Saya telah mengimplementasikan solusi dari @stewdebaker yang bekerja dengan sangat baik, namun saya menginginkan popup bootstrap yang bagus daripada konfirmasi JavaScript standar yang kikuk. Dengan asumsi Anda sudah menggunakan ngx-bootstrap, Anda dapat menggunakan solusi @ stwedebaker, tetapi tukar 'Guard' dengan yang saya tunjukkan di sini. Anda juga perlu memperkenalkan ngx-bootstrap/modal, dan menambahkan yang baru ConfirmationComponent:

Menjaga

(ganti 'confirm' dengan fungsi yang akan membuka modal bootstrap - menampilkan custom baru ConfirmationComponent):

import { Component, OnInit } from '@angular/core';
import { ConfirmationComponent } from './confirmation.component';

import { CanDeactivate } from '@angular/router';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal';

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

@Injectable()
export class PendingChangesGuard implements CanDeactivate<ComponentCanDeactivate> {

  modalRef: BsModalRef;

  constructor(private modalService: BsModalService) {};

  canDeactivate(component: ComponentCanDeactivate): boolean | Observable<boolean> {
    // if there are no pending changes, just allow deactivation; else confirm first
    return component.canDeactivate() ?
      true :
      // NOTE: this warning message will only be shown when navigating elsewhere within your angular app;
      // when navigating away from your angular app, the browser will show a generic warning message
      // see http://stackoverflow.com/a/42207299/7307355
      this.openConfirmDialog();
  }

  openConfirmDialog() {
    this.modalRef = this.modalService.show(ConfirmationComponent);
    return this.modalRef.content.onClose.map(result => {
        return result;
    })
  }
}

confirm.component.html

<div class="alert-box">
    <div class="modal-header">
        <h4 class="modal-title">Unsaved changes</h4>
    </div>
    <div class="modal-body">
        Navigate away and lose them?
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" (click)="onConfirm()">Yes</button>
        <button type="button" class="btn btn-secondary" (click)="onCancel()">No</button>        
    </div>
</div>

konfirmasi.component.ts

import { Component } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import { BsModalRef } from 'ngx-bootstrap/modal';

@Component({
    templateUrl: './confirmation.component.html'
})
export class ConfirmationComponent {

    public onClose: Subject<boolean>;

    constructor(private _bsModalRef: BsModalRef) {

    }

    public ngOnInit(): void {
        this.onClose = new Subject();
    }

    public onConfirm(): void {
        this.onClose.next(true);
        this._bsModalRef.hide();
    }

    public onCancel(): void {
        this.onClose.next(false);
        this._bsModalRef.hide();
    }
}

Dan karena yang baru ConfirmationComponentakan ditampilkan tanpa menggunakan selectordalam template html, itu perlu dideklarasikan di entryComponentsroot Anda app.module.ts(atau apa pun yang Anda beri nama modul root Anda). Lakukan perubahan berikut untuk app.module.ts:

app.module.ts

import { ModalModule } from 'ngx-bootstrap/modal';
import { ConfirmationComponent } from './confirmation.component';

@NgModule({
  declarations: [
     ...
     ConfirmationComponent
  ],
  imports: [
     ...
     ModalModule.forRoot()
  ],
  entryComponents: [ConfirmationComponent]

Solusinya lebih mudah dari yang diharapkan, jangan gunakan hrefkarena ini tidak ditangani oleh routerLinkdirektif penggunaan Angular Routing .

Jawaban Juni 2020:

Perhatikan bahwa semua solusi yang diusulkan hingga saat ini tidak menangani cacat signifikan yang diketahui dengan canDeactivatepenjaga Angular :

1. Pengguna mengklik tombol 'kembali' di browser, menampilkan dialog, dan pengguna mengklik BATAL .
2. Pengguna mengklik tombol 'kembali' lagi, dialog ditampilkan, dan pengguna mengklik KONFIRMASI .
3. Catatan: pengguna dinavigasi kembali 2 kali, yang bahkan dapat membuat mereka keluar dari aplikasi sama sekali :(

Ini telah dibahas di sini , di sini , dan panjang lebar di sini

Silakan lihat solusi saya untuk masalah yang ditunjukkan di sini yang bekerja dengan aman di sekitar masalah ini *. Ini telah diuji di Chrome, Firefox, dan Edge.

* PERHATIAN PENTING : Pada tahap ini, di atas akan menghapus riwayat maju ketika tombol kembali diklik, tetapi mempertahankan riwayat belakang. Solusi ini tidak akan sesuai jika mempertahankan riwayat maju Anda sangat penting. Dalam kasus saya, saya biasanya menggunakan strategi perutean detail utama ketika datang ke formulir, jadi mempertahankan riwayat ke depan tidak penting.