父类的Angular2 EventEmitter

Question

I created a abstract super class to handle generic factors for various form components within my app.

For some reason I cannot properly catch events emitted by a derived class who's EventEmitter is declared in a superclass.

Superclass:

export abstract class Form<T> implements OnInit {
    @Output() submitted : EventEmitter<T> = new EventEmitter<T>();
    fb                  : FormBuilder     = new FormBuilder();
    formModel           : ControlGroup;

    abstract ngOnInit() : any;
}

Derived:

export class LoginFormComponent extends Form<Login> {

    credentials : Login = new Login();

    constructor() {
        super();
    }

    doLogin() {
        this.submitted.emit(this.credentials);
    }
}

HTML of encapsulating element:

<login-form (submitted)="login($event)"></login-form>\

When I move the EventEmitter to the derived class, everything works like a charm. What do I need to change to allow this to work?

Answer 1

Such decorators in super-classes are not recognized by Angular.

You can enable them using the @Component() annotation

@Component({
  selector: '...',
  outputs: ['submitted'],
  inputs: ['...']
})

See also https://github.com/angular/angular/issues/5415

Answer 2

The problem is that the @Component decorator doesn't support inheritance (elements defined in the parent class). It takes into account only elements defined in the current decorated class.