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

typescript

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

在使用 Angular 开发应用程序时，经常会遇到需要处理表单脏（未提交的更改）的情况。当用户在表单中进行了更改但尚未提交时，如果用户尝试离开当前页面，可能会导致数据丢失。为了避免这种情况，我们可以使用 canDeactivate Guard 服务以及模式对话框来提醒用户是否保存更改。

使用 canDeactivate Guard 服务

canDeactivate Guard 服务是 Angular 提供的一个路由守卫，用于在用户离开某个路由之前执行一些逻辑。我们可以利用这个服务来检查表单是否脏，并决定是否允许用户离开当前页面。下面是一个示例代码：

typescript
import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';
import { Observable } from 'rxJS';
import { MatDialog } from '@angular/material/dialog';
import { ConfirmationDialogComponent } from './confirmation-dialog/confirmation-dialog.component';
@Injectable()
export class CanDeactivateGuard implements CanDeactivate<any> {
  constructor(private dialog: MatDialog) {}
  canDeactivate(component: any): Observable<boolean> | Promise<boolean> | boolean {
    if (component.form.dirty) {
      const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
        data: {
          message: '您有未保存的更改，确定要离开吗？'
        }
      });
      return dialogRef.afterClosed();
    }
    return true;
  }
}

在上述代码中，我们创建了一个名为 CanDeactivateGuard 的服务，并实现了 CanDeactivate 接口。在 canDeactivate 方法中，我们首先检查表单是否脏（即用户是否进行了更改但尚未提交），如果是，则弹出一个模式对话框来询问用户是否确定离开当前页面。

使用模式对话框

在上述代码中，我们使用了 Angular Material 库提供的 MatDialog 服务来创建模式对话框。在 CanDeactivateGuard 服务的构造函数中注入了 MatDialog 服务，并在 canDeactivate 方法中使用它来打开一个名为 ConfirmationDialogComponent 的对话框。

下面是 ConfirmationDialogComponent 的示例代码：

typescript
import { Component, Inject } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
@Component({
  selector: 'app-confirmation-dialog',
  templateUrl: './confirmation-dialog.component.html',
  styleUrls: ['./confirmation-dialog.component.CSS']
})
export class ConfirmationDialogComponent {
  constructor(
    public dialogRef: MatDialogRef<ConfirmationDialogComponent>,
    @Inject(MAT_DIALOG_DATA) public data: { message: string }
  ) {}
  onConfirm(): void {
    this.dialogRef.close(true);
  }
  onCancel(): void {
    this.dialogRef.close(false);
  }
}

在上述代码中，我们创建了一个名为 ConfirmationDialogComponent 的组件，并使用 MAT_DIALOG_DATA 注入了一个名为 message 的数据。在对话框中，我们展示了一个确认信息，并提供了确认和取消按钮。当用户点击确认按钮时，我们通过调用 dialogRef.close(true) 来关闭对话框并返回一个 true 值，表示用户确定离开当前页面。当用户点击取消按钮时，我们通过调用 dialogRef.close(false) 来关闭对话框并返回一个 false 值，表示用户取消离开当前页面。

使用 canDeactivate Guard 服务

在我们完成了 CanDeactivateGuard 服务和模式对话框组件的设置后，我们需要将 CanDeactivateGuard 服务应用到需要检查表单脏的路由上。

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

在上述代码中，我们将 CanDeactivateGuard 服务应用到了名为 FormComponent 的组件上，并将其添加到了 canDeactivate 属性中。

通过使用 Angular 的 canDeactivate Guard 服务以及模式对话框，我们可以很方便地处理未提交的更改（表单脏）情况。当用户在表单中进行了更改但尚未提交时，我们可以弹出一个模式对话框来提醒用户是否保存更改。这样可以有效地避免数据丢失的问题，提升用户体验。

以上就是关于在 Angular 中使用 canDeactivate Guard 服务来处理未提交的更改的介绍。希望本文对你有所帮助！