在Angular中如何将组件中的数据解析为Guard

Question

我想在屏幕上向用户显示提示，如果他们试图从他们对表单进行更改的页面导航。到目前为止，我已经创建了一个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 },

所以，如果用户对UserEditorComponent内部的表单进行更改，我需要在导航发生之前显示一个对话框，我已经有了这个对话框的组件，我在应用程序的不同部分使用它。

感谢

Answer 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>或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);
},
});
});
}
}