My Angular2-based client-side application has a base class:
abstract class BaseClass {
@HostListener('window:beforeunload') beforeUnloadHandler() {
console.log('bla');
}
}
and two similar derived classes:
@Component({
selector: 'derived-one',
templateUrl: './templates/app/+derived-one/derived-one.component.html'
})
export class DerivedOne extends BaseClass {
}
@Component({
selector: 'derived-two',
templateUrl: './templates/app/+derived-two/derived-two.component.html'
})
export class DerivedTwo extends BaseClass {
}
The issue is that beforeUnloadHandler works fine in DerivedOne but not at all in DerivedTwo.
Although it may be difficult to pinpoint the exact cause based on the provided information, any suspicions about what could be causing this unusual behavior would be appreciated.
Some additional notes:
If I use the following :
abstract class BaseClass
constructor(){
window.onbeforeunload = function(){
console.log('bla');
}
}
}
everything works fine, but I prefer an Angular2-based solution;
If I write
abstract class BaseClass {
beforeUnloadHandler() {
console.log('bla');
}
}
and in derived-two.component.html
<div (window.beforeunload)="beforeUnloadHandler()"></div>
everything works fine too, but it seems like a workaround;
Again, if I write
abstract class BaseClass {
beforeUnloadHandler() {
console.log('bla');
}
}
and
@Component({
selector: 'derived-two',
host: {'window:beforeunload': 'beforeUnloadHandler' }
templateUrl: './templates/app/+derived-two/derived-two.component.html'
})
export class DerivedTwo extends BaseClass {
}
it won’t work.
Finally, if I use @HostListener in both DerivedTwo and DerivedOne, it works, but I want to avoid duplicating code.
Hopefully, this information provides enough context to work with (or at least generate some hypotheses).