具有修饰方法的组件的基础 class 未在从其继承的组件中选取

Question

我在我的组件中使用这段代码在用户刷新页面之前进行确认，以避免错误地丢失更改：

  @HostListener('window:beforeunload', ['$event'])
  unloadNotification($event: any) {
    if (!this.canDeactivate()) {
     $event.returnValue = '';
     $event.preventDefault();
    }
  }

为了避免在其他组件中重复该代码，我想创建一个基础 class，例如

@Injectable()
export abstract class ComponentCanDeactivate {
  abstract canDeactivate(): boolean;

  @HostListener('window:beforeunload', ['$event'])
  unloadNotification($event: any) {
    if (!this.canDeactivate()) {
      $event.returnValue = '';
      $event.preventDefault();
    }
  }

但现在扩展此基础的组件 class 似乎没有监听 beforeunload 事件。 Angular 没有选择装饰器是因为它在基础 class 上吗？我在下面看到这项工作：example 使用 angular 11，我正在使用 angular 13。不知道这是否改变了行为或者我是否遗漏了什么

Answer 1

您需要摘要 class 成为 Component 而不是 Injectable

@Component({ template: '' })
export abstract class ComponentCanDeactivate {

https://stackblitz.com/edit/angular-ivy-xsmfdn?file=src/app/concrete/concrete.component.ts

Angular 支持继承 HostListener 但当你像这样混合装饰器时似乎会感到困惑。