如何获取已在 Angular 中传递到我的 canDeactivate Guard 中的通用组件 属性？

Question

我想将多个组件 (Component1 | Component2) 传递到我的 canDeactivate 守卫中，所以我使用如下所示的泛型。

问题 - 有一个 属性 我想从我传入的每个组件访问，那么如何获取通用组件 属性 ？

我必须投射什么的吗？ 我可以在调试器中看到该组件在那里，但我无法访问这些属性，直到我进入实时函数。

仅供参考 - component.profileForm.dirty 不起作用，因为在我进入函数之前它不知道 T 是什么

export class PreventUnsavedChangesGuard <T> implements CanDeactivate <T> {

  constructor(private confirmService: ConfirmService) {}

  canDeactivate(component: T): Observable < boolean > | boolean {
    if (component.hasOwnProperty('profileForm')) {
      if (component.profileForm.dirty) {
        return this.confirmService.confirm();
      }
    }
    return true;
  }

}

Answer 1

您可以定义一个接口，其中包含您希望组件具有的最少信息，例如，

interface HasProfileForm {
    profileForm: Form
}

然后你可以修改你的守卫以使用新界面，例如

export class PreventUnsavedChangesGuard <T extends HasProfileForm> implements CanDeactivate <T> {

  constructor(private confirmService: ConfirmService) {}

  canDeactivate(component: T): Observable<boolean> | boolean {
    if (component.hasOwnProperty('profileForm')) {
      if (component.profileForm.dirty) {
        return this.confirmService.confirm();
      }
    }
    return true;
  }
}