title: Angular2 @HostListener won't work in derived component
body: <p>I have an application with Angular2-based client side.
  I have a base class:</p>
  
  <pre><code>abstract class BaseClass {
      @HostListener('window:beforeunload') beforeUnloadHandler() {
          console.log('bla');
      }
  }
  </code></pre>
  
  <p>and two very similar to each other derived classes:</p>
  
  <pre><code>@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 {
  }
  </code></pre>
  
  <p>The problem is that, for example, in <code>DerivedOne</code> <code>beforeUnloadHandler</code> works fine while in <code>DerivedTwo</code> it doesn’t receive a call at all.</p>
  
  <p>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.</p>
  
  <p>A few more notes:</p>
  
  <p>If I use the following :</p>
  
  <pre><code>abstract class BaseClass
      constructor(){
          window.onbeforeunload = function(){
              console.log('bla');
          }
      }
  }
  </code></pre>
  
  <p>everything works fine, but I still would like to find an Angular2-based solution;</p>
  
  <p>If I write </p>
  
  <pre><code>abstract class BaseClass {
      beforeUnloadHandler() {
          console.log('bla');
      }
  }
  </code></pre>
  
  <p>and in <code>derived-two.component.html</code></p>
  
  <pre><code>&lt;div (window.beforeunload)="beforeUnloadHandler()"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>everything works fine too, but it looks like an ugly hack;</p>
  
  <p>Again, if I write </p>
  
  <pre><code>abstract class BaseClass {
      beforeUnloadHandler() {
          console.log('bla');
      }
  }
  </code></pre>
  
  <p>and </p>
  
  <pre><code>@Component({
      selector:  'derived-two',
      host: {'window:beforeunload': 'beforeUnloadHandler' }
      templateUrl:  './templates/app/+derived-two/derived-two.component.html'
  })
  export class DerivedTwo extends BaseClass {
  }
  </code></pre>
  
  <p>it won’t work.</p>
  
  <p>Finally, if I use <code>@HostListener</code> in <code>DerivedTwo</code> and in <code>DerivedOne</code>, it works, but I would like to avoid using duplicate code.</p>
  
  <p>Hopefully, the information above would be enough to work with (at least to have some guesses).</p>