0

如果他们试图离开他们对表单进行更改的页面，我想在屏幕上向用户显示提示。到目前为止，我已经创建了一个 Guard，并成功地让它在用户离开此页面时在控制台中记录一些内容。但是现在，我需要显示一个Dialog警告他们的框，他们应该能够取消“导航”或确认他们希望导航离开。

我的组件中有一个方法，其中包含检查是否对表单进行了更改的表单，现在我只需要实现上述其余部分。

这是我的后卫：

import { Injectable } from '@angular/core';
import { CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class RouterGuardGuard implements CanDeactivate<unknown> {
  canDeactivate(
    component: unknown,
    currentRoute: ActivatedRouteSnapshot,
    currentState: RouterStateSnapshot,
    nextState?: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    console.log('TESTING');

    return true;
  }

}

我已经在我的内部实现了我的组件的保护app-routing-module.ts：

  { path: 'users/edit/:id', canDeactivate: [RouterGuardGuard], component: UserEditorComponent },

因此，如果用户在导航发生之前对 I need to show a dialog box 中的表单进行了更改，则UserEditorComponent我已经拥有此对话框的组件，我在应用程序的不同部分中使用了该组件。

谢谢

4

1 回答 1

1

您需要您的canDeactivate方法能够确认组件表单的状态。为此，您可以这样做的一种方法是创建一个接口，该接口在您的组件类中实现时将返回用户离开或留在组件中的决定。

在你的警惕中，创建一个像这样的接口

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

使用您刚刚创建的接口代替未知类型：

 export class RouterGuardGuard implements CanDeactivate<CanComponentDeactivate>{...}

..然后在你的canDeactivate方法中返回：

  canDeactivate(
    component: CanComponentDeactivate,
    currentRoute: ActivatedRouteSnapshot,
    currentState: RouterStateSnapshot,
    nextState?: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    return component.canDeactivate();
  }

现在在您的组件中，您需要实现canComponentDeactivate您创建的接口。因此，在canDeactivate您从接口实现的方法中，访问您的表单并检查它是否为touched或dirty。如果是这样提示用户并返回promise<boolean>or boolean。例如

canDeactivate() {
 if (this.myForm.dirty || this.myForm.touched) {
      return new Promise((resolve) => {
        this.modalService.create({
          content:
            "Your have unsaved changes. Are you sure you want to return?",
          onOk: () => {
            resolve(true);
          },
          onCancel: () => {
            resolve(false);
          },
        });
      });
 }
}
于 2021-08-31T16:15:28.837 回答