CanDeactivate不起作用

Question

我正在尝试检测路由器的停用状态。

这是路由器的定义：

export const AppRoutes: Routes = [


{
    path: '',
    component: HelloComponent,
    canDeactivate: [ConfirmDeactivateGuard]
  },
  {
    path: 'error',
    component: ErrorComponent,
    canDeactivate: [ConfirmDeactivateGuard],
  },
  {
    path: '**',
    component: ErrorComponent,
    canDeactivate: [ConfirmDeactivateGuard],
    pathMatch: 'full',
  }
];

export const AppRouting: ModuleWithProviders = RouterModule.forRoot(AppRoutes, {
  enableTracing: true,
});

这是我停用的警卫服务：

@Injectable()
export class ConfirmDeactivateGuard implements CanDeactivate<HelloComponent> {
  canDeactivate(target: HelloComponent) {
    // This code is never called. Why?
    return window.confirm('wtf?' || 'Are you sure?');
  }
}

当我尝试从根url（'/'）转到其他URL时，我希望看到窗口确认。但是，这没有发生。您有什么主意还是找不到任何东西？

如果要在线查看代码，请查看以下链接：

https://stackblitz.com/edit/angular-vw9b7u?file=src%2Fapp%2FdeactivateGuard.ts

Answer 1

您需要将防护措施添加到模块的提供程序中

    providers: [ConfirmDeactivateGuard],

这里是modified stackblitz demo

编辑：该防护措施不会从直接导航中触发，也就是说，当您在地址栏中直接输入网址时。警卫仅触发在角度应用程序中进行导航（请参阅here）。您可以使用beforeunload事件作为解决方法

Answer 2

也许，如果您在模块的提供程序中提供了防护措施并提出了一种导航方法，那么它将起作用...

Stackblitz