I have an application with Angular2-based client side. I have a base class:
abstract class BaseClass {
@HostListener('window:beforeunload') beforeUnloadHandler() {
console.log('bla');
}
}
and two very similar to each other 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 problem is that, for example, in DerivedOne
beforeUnloadHandler
works fine while in DerivedTwo
it doesn’t receive a call at all.
I know it’s hard to find the reason why it happens just looking on the information above, but maybe someone might have a suspicion what could cause such strange behavior.
A few more notes:
If I use the following :
abstract class BaseClass
constructor(){
window.onbeforeunload = function(){
console.log('bla');
}
}
}
everything works fine, but I still would like to find 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 looks like an ugly hack;
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 DerivedTwo
and in DerivedOne
, it works, but I would like to avoid using duplicate code.
Hopefully, the information above would be enough to work with (at least to have some guesses).