代码之家 › 专栏 › 技术社区 › JSON

为什么CanDeactivate Guard不能读取我组件中的方法?

angular-router-guards angular

JSON · 技术社区 · 6 年前

CanDeactivate 根据文档,但似乎警卫无法读取组件的属性或方法。

这是我的守卫,

@Injectable()
export class CanDeactivateGuard implements CanDeactivate<PatientRegistrationFormComponent> {
  constructor() {}
  canDeactivate(component: PatientRegistrationFormComponent) {
    return component.isChangesSaved();
  }
}

isChangesSaved() 是组件内部的方法。

public isChangesSaved(): Observable<boolean> {
    if (this.isDirtyForm()) {
      return this.confirmService.confirmUnsavedChanges();
    }
    return of(false);
  }

这就是错误,

错误错误:未捕获(在承诺中):TypeError:无法读取属性空类型的“isChangesSaved”错误:无法读取属性 CanDeactivateGuard.push../src/app/core/database/database cores/registry core/guards/patient-registration.guard.ts.CanDeactivateGuard.canDeactivate

这是我的模块(延迟加载)

@NgModule({
  imports: [
    CommonModule,
    RegistryRoutingModule,
    ReactiveFormsModule,
    FormsModule,
  ],
  declarations: [
    RegistryContainerComponent,
    RegistryHomeComponent,
    PatientRegistrationFormComponent, // component of interest â¦.
  ],
  exports: [PatientRegistrationFormComponent],
  schemas: [NO_ERRORS_SCHEMA],
  providers: [
    â¦fromGaurds.guards,  // all my guards are loaded hereâ¦.
    { provide: ErrorStateMatcher, useClass: ShowOnDirtyErrorStateMatcher },
    ToastService,
  ],
})
export class RegistryModule {}

这是我的路由模块

const routes: Routes = [
  {
    path: '',
    component: RegistryContainerComponent,
    children: [
      {
        path: '',
        component: RegistryHomeComponent,
      },
      {
        path: 'patientregistration',
        component: PatientRegistrationFormComponent,
        canDeactivate: [fromGaurds.CanDeactivateGuard],

        children: [
          {
            path: '',
            component: PatientRegistrationFormComponent,
             canActivate: [fromGaurds.PatientRegistryGuard],
            canDeactivate: [fromGaurds.CanDeactivateGuard],
          },
          {
            path: ':id',
            component: PatientRegistrationFormComponent,
            canActivate: [fromGaurds.PatientRegistryRecordGuard],
            canDeactivate: [fromGaurds.CanDeactivateGuard],
          },
        ],
      },
    ],
  },
];
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class RegistryRoutingModule {}

更新

我厌倦了在延迟加载模块中添加保护。这是子模块的父模块 RegistryModule 上面提到过,

const dbRoutes: Routes = [
  {
    path: '',
    component: DbHomeComponent,
    data: { preload: true },
    canDeactivate: [fromGaurds.CanDeactivateGuard],
    children: [
      { path: '', component: UsersDashboardComponent },
      {
        path: 'registry',
        canActivate: [RoleGuardService],
        data: { expectedRole: { roles: ['reg'] } },
        loadChildren: '../database-cores/registry-core/modules/registry.module#RegistryModule',
      },
      {
        path: 'cloudstorage',
        canActivate: [RoleGuardService],
        loadChildren:
          '../database-cores/cloud-storage-core/modules/cloud-storage.module#CloudStorageModule',
      },
    ],
  },
];
@NgModule({
  imports: [RouterModule.forChild(dbRoutes)],
  exports: [RouterModule],
})
export class DbRoutingModule {}

@NgModule({
  declarations: [
    DbHeaderComponent,
    DbFooterComponent,
    DbHomeComponent,
    UsersDashboardComponent,
  ],
  imports: [

    }),
  ],
  exports: [],
  providers: [
    ...fromGaurds.guards,
    MDBSpinningPreloader,
    ToastService,
    DirectoryService,
  ],
  schemas: [NO_ERRORS_SCHEMA],
})
export class DbModule {}

2 回复 | 直到 6 年前

Jags 6 年前

我修改了你的 stackblitz

有问题的代码在RegistryRoutingModule中。父路由 'patientregistration' 和儿童路线 ''

const routes: Routes = [
  {
    path: '',
    component: RegistryContainerComponent,
    children: [
      {
        path: '',
        component: RegistryHomeComponent,
      },
      {
        path: 'patientregistration',
        component: PatientRegistrationFormComponent,
        canDeactivate: [fromGaurds.CanDeactivateGuard],

        children: [
          {
            path: '',
            canActivate: [fromGaurds.PatientRegistryGuard]
          },
          {
            path: ':id',
            canActivate: [fromGaurds.PatientRegistryRecordGuard]
          },
        ],
      },
    ],
  },
];

JSON 6 年前

整理好了。功劳归于 sliceofbytes

问题还在于在父路径和子路径中复制我的组件

以下配置也按预期工作。 canDeactivate 为两个孩子服务。我相信核心问题是我只有一个 PatientRegistrationFormComponent 为两条儿童路线服务。

Here 是回购协议。

const routes: Routes = [
  {
    path: '',
    component: RegistryContainerComponent,
    children: [
      {
        path: '',
        component: RegistryHomeComponent,
      },
      {
        path: 'patientregistration',
        //component: PatientRegistrationFormComponent, <---- here was the core issue
        children: [
          {
            path: '',
            component: PatientRegistrationFormComponent,
             canActivate: [fromGaurds.PatientRegistryGuard],
             canDeactivate: [fromGaurds.CanDeactivateGuard],
          },
          {
            path: ':id',
            component: PatientRegistrationFormComponent,
            canActivate: [fromGaurds.PatientRegistryRecordGuard],
            canDeactivate: [fromGaurds.CanDeactivateGuard],
          },
        ],
      },
    ],
  },
];
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
})
export class RegistryRoutingModule {}