Angular 2 EventEmitter base class output not raised and not processed

Question

Very simple base class Closer

import {EventEmitter, Output} from 'angular2/core';

export class Closer {
  @Output() closed: EventEmitter<any> = new EventEmitter();

  constructor() {}

  close() {
    this.closed.emit({});
  }
}

If I'm a extends Closerdifferent class, then mark it

<derived-class (closed)="closeHandler()"></derived-class>

closeHandler()will never be called. I see that the call Closer.close()is invoking, but emit does not extend to the derived class or is handled by a class whose template contains the derived class and event binding.

If I just move @Outputto a derived class, it works. But it would seem that Angular2 should put this on derived classes. A good opportunity to fully define a set of behavior and inherit it.

Answer 1

, , . , , : ['closed'] , Closer, @Output() Closer

:

:

@Component({
  selector: 'derived-class',
  outputs: ['closed']
})
export class DerivedClass extends Closer {}

:

import {EventEmitter} from 'angular2/core';

export class Closer {
  closed: EventEmitter<any> = new EventEmitter();

  constructor() {}

  close() {
    this.closed.emit({});
  }
}