angular - 从 CanDeactivate 防护访问组件属性

Question

我在一个应用程序中有多个表单，并且我有一个 CanDeactivate 守卫，它会提示用户确认他们是否要在不先保存他们编辑的表单的情况下离开页面。每个带有表单的组件都有一个hasBeenEdited检查表单是否被编辑过的功能。由于我只有一个 CanDeactivate 可注入类来处理所有这些带有表单的组件，因此我需要访问hasBeenEdited用户当前路由到的组件的功能。如何最好地做到这一点？我见过一些例子，其中canDeactivate保护类中的函数被传递一个组件参数，但我不确定如何传递当前路由的组​​件。

Answer 1

描述 canDeactivate 接口

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

形容守卫

@Injectable()
export class CanDeactivateGuard implements CanDeactivate<CanDeactivateComponent> {
  canDeactivate(component: CanDeactivateComponent) {
    return component.canDeactivate ? component.canDeactivate() : true;
  }
}

描述路线

 path: 'yourPath',     
 canDeactivate: [CanDeactivateGuard],
 component: YourComponent

和组件：

 ...
 class YourComponent implements CanDeactivateComponent {
 ...
   canDeactivate() { 
     ... everything you need to detect if you can leave route: return false, 
       or observable
   }

Answer 2

您可以尝试使用IEdited接口：

interface IEdited {
  hasBeenEdited: (): boolean
}

并让您的组件实现它，然后也许这会起作用：

@Injectable()
class CanDeactivateEdited implements CanDeactivate<IEdited> {
  canDeactivate(
    component: IEdited,
    currentRoute: ActivatedRouteSnapshot,
    currentState: RouterStateSnapshot,
    nextState: RouterStateSnapshot
  ): boolean {
    return component.hasBeenEdited();
  }
}

Answer 3

我正在使用 Angular 5，（并不是说我知道这很重要！）但是接受的答案对我来说还不够，我了解到我们需要“使用 @NgModule 装饰器的提供者属性在应用程序路由模块中配置防护”， 来源：https://www.concretepage.com/angular-2/angular-candeactivate-guard-example

app-routing.module.ts因此，除了接受的答案之外，我还必须添加如下所示的提供者：

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers:[CustomExitGuard]
})