Question

我有这样的父类：

export class BaseForm {
  @Output() public eventSubmit:EventEmitter<any> = new EventEmitter<any>();

  public emitForm() :void {
   const params = this.getParams();
   this.eventSubmit.emit(params);
  }

  public onSubmit(){
  if (!this.isValid) {
   return;
  }
  this.emitForm()
 }
}

孩子：

@Component({
  selector: 'app-auth-form',
  templateUrl: './auth-form.component.html',
  styleUrls: ['./auth-form.component.styl'],

})
export class AuthFormComponent extends BaseForm { }

然后我尝试绑定另一个组件，如下所示：

<app-auth-form
  (eventSubmit)="tap($event)"
  [error]="error">
</app-auth-form>

tap只是显示发出的数据。所以，然后我在BaseForm中发出一些东西，我在日志中没有任何东西。有什么想法吗？

Answer 1

更新

截至2016年11月底，Angular的团队已经引入了装饰器继承。以下是您想要使用它时要记住的规则：

类装饰器是继承的，但从未从父类合并到子类
  如果子类没有定义自己的ctor，则继承
ctor参数和装饰器

如果子类没有重新定义，我们将父类方法/属性上定义的装饰器继承到 - 子类   方法/属性

我们继承了生命周期方法

来源：https://github.com/angular/angular/issues/11606#issuecomment-261625522

原始答案：

@Input()，@Output()等方法/属性装饰器以及@Component()，@Directive()等类装饰器不继承。你必须添加

@Output() public eventSubmit:EventEmitter<any> = new EventEmitter<any>();

也为了你的孩子班级，让它发挥作用。

编辑：这是我前段时间扩展的组件示例（popover扩展工具提示）http://plnkr.co/edit/n5jCg3sK6VRu7fZfj7i2?p=preview

Answer 2

你不能直接添加它作为@Input或像@Component一样，不能那样工作，你必须包含@Output作为发射器的参考，因为不会继承。

Answer 3

如果向子节点添加装饰器（例如@Input）且父节点已经有@Output emit事件，则子节点不会响应该out事件。在这种情况下，您需要从子节点中删除并将@Input添加到父节点，或者除了子节点中的@Input之外，您还将@Output添加到子节点，就像它在父节点中一样。

---Child will not respond to emitter inheritted from parent - THIS WILL NOT WORK
-Parent
    .
    .
    @Output emitter = new EventEmitter();
    .
    .

-Child extends Parent
    .
    .
    @Input foo = blah;
    .
    .

---Solution 1.

-Child extend Parent and include a declaration for @Output
    .
    .
    @Input foo = blah;
    @Output emitter = new EventEmitter(); //this will also be in the Parent
    .
    .

---Solution 2.
-Child - Remove the @Input from child and add it to the parent
    .
    .
    
    .
    .

-Parent
    .
    .
    @Input foo = blah; //This is no longer in the child only in the parent
    @Output emitter = new EventEmitter();
    .
    .

两个Soln。 1和2将起作用。

Angular 2输出EventEmitter不起作用

3 个答案:

更新

原始答案：