如果未保存更改,Angular 2/4会阻止用户离开组件

Question

我有这个界面,我用来阻止用户离开页面

export interface ComponentCanDeactivate {
  canDeactivate: () => boolean;
}

@Injectable()
export class PendingChangesGuard implements CanDeactivate<ComponentCanDeactivate> {
  canDeactivate(component: ComponentCanDeactivate): boolean {
    return  component.canDeactivate() ?
     //code : //more code
  }
}

在我的一个组件中,我有以下代码

export class DashboardComponent implements ComponentCanDeactivate{
  @HostListener('window:beforeunload')
  canDeactivate(): boolean {
    return !this.isDirty;
  }

我的问题是来自PendingChangesGuard的我的组件 - >(component:ComponentCanDeactivate)总是为空,所以我得到一个错误说

无法调用null的canDeactivate()

我的路由也有这个设置

 path: 'dashboard',
        canDeactivate: [PendingChangesGuard],
        loadChildren: './views/dashboard/dashboard.module#DashboardModule'

谁能告诉我我做错了什么？

Answer 1

这个问题是由延迟加载引起的

而不是在您的应用程序路由中具有此:

path: 'dashboard',
        canDeactivate: [PendingChangesGuard], <-- causing issue
        loadChildren: './views/dashboard/dashboard.module#DashboardModule'

您需要从应用程序路由中删除canDeactive并将其移至模块路由.

const routes: Routes = [
  {
    path: '',
    component: DashboardComponent,
    canDeactivate: [ PendingChangesGuard ]
  }