具有修饰方法的组件的基类没有在从其继承的组件中拾取

Question

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

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

为了避免在其他组件中重复该代码，我想创建一个类似的基类

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

但是现在扩展这个基类的组件似乎没有监听beforeunload事件。装饰器不是因为在基类上而被Angular选中的吗？我在这个例子中看到了这项工作：使用angular 11的例子，我使用angular 13。不知道这是否改变了行为，或者我是否错过了

Answer 1

您需要抽象类是Component而不是Injectable

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

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

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