Question

我在一个应用程序中有多个表单，并且我有一个CanDeactivate守护程序，该守护程序提示用户确认是否要离开页面而无需先保存已编辑的表单。每个带有表单的组件都有一个hasBeenEdited函数，用于检查表单是否已被编辑。由于我只有一个CanDeactivate可注入类来处理带有表单的所有这些组件，因此我需要访问用户当前路由到的组件的hasBeenEdited函数。如何最好地做到这一点？我看过一些示例，其中在guard类中的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

您可以尝试使用SELECT t1.ID, t1.measurement, t1.timestamp, avg(t2.measurement) FROM table t1, table t2 WHERE t2.timestamp >= t1.timestamp AND t2.timestamp < t1.timestamp + 60*1000 GROUP BY t1.ID, t1.measurement, t1.timestamp界面：

IEdited

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

interface IEdited {
  hasBeenEdited: (): boolean
}

Answer 3

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

因此，除了接受的答案之外，我还必须像下面的app-routing.module.ts中那样添加提供程序：

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

从CanDeactivate Guard

3 个答案: