Angular 在 canDeactivate Guard 服务中使用模式对话框来处理未提交的更改（表单脏）

Angular 中使用 canDeactivate Guard 服务处理未提交的更改

typescript
import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';
import { Observable } from 'rxjs';
import { MatDialog } from '@angular/material/dialog';
import { YourComponent } from './your-component-path';
@Injectable({
  providedIn: 'root'
})
export class CanDeactivateGuard implements CanDeactivate {
  constructor(private dialog: MatDialog) {}
  canDeactivate(component: YourComponent): Observable | boolean {
    if (component.isDirty()) { // Assuming 'isDirty()' method checks if there are unsaved changes
      const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
        width: '400px',
        data: { message: '您有未保存的更改。您确定要离开吗？' }
      });
      return dialogRef.afterClosed();
    }
    return true;
  }
}

typescript
import { Component, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
@Component({
  selector: 'app-confirmation-dialog',
  template: `
    
确认
    {{ data.message }}
    
      保存
      取消
    
  `,
})
export class ConfirmationDialogComponent {
  constructor(
    public dialogRef: MatDialogRef,
    @Inject(MAT_DIALOG_DATA) public data: { message: string }
  ) {}
}

typescript
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { YourComponent } from './your-component-path';
import { CanDeactivateGuard } from './can-deactivate.guard';
const routes: Routes = [
  {
    path: 'your-component',
    component: YourComponent,
    canDeactivate: [CanDeactivateGuard]
  },
  // ... other routes
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {}