angular keyup事件不会在子组件上触发，而只会在父组件上触发

我创建了一个组件，希望在我的应用程序中拥有多个版本，因为我想将所有逻辑都保留在一个地方，所以我创建了一个ParentComponent，将我的所有代码都放在其中。

但是angular不继承组件注释，因此我还创建了一个“ TemplateComponent”，以防止代码重复。TemplateComponent保存输入，但是由ParentComponent处理输入中的事件。这样，每个ChildComponent都继承逻辑的ParentComponent，并且它的模板是TemplateComponent的实例。

最重要的是，当我尝试在TemplateComponent内的输入上侦听keyup事件时，在没有任何输入或控件的ChildComponent上调用了click事件。

我试图将事件绑定传递给模板组件以连接键盘输入，但它从未触发。

ChildComponent上有一个HostListener，目的是调试事件仅在此处触发。这并不是导致事件在此停止的原因。

有没有一种方法可以告诉angular必须在模板组件内部调用keydown事件，或者是将所有内容链接在一起的另一种方法？

我有一个工作的小伙子，这很不言而喻：

https://plnkr.co/edit/e4U6DB4d47ULpLppHd4H?p=preview

而且还有代码：

ParentComponent：

import {Component, NgModule, VERSION} from '@angular/core'

@Component({
  selector: 'app-parent',
  template: `
    <ng-content></ng-content>
  `,
})
export class ParentComponent {

  printText = 'Not yet';

  constructor() {
  }

  inputKeyDownEnter(event: any) {
    this.printText = 'KeyDown OK!';
  }

  clearButtonClick(event: any) {
    this.printText = "Clear button click!";
  }
}

ChildComponent：

import {Component, HostListener} from '@angular/core';
import {ParentComponent} from './parent.component';

@Component({
  selector: 'app-child',
  template: `
    <div>{{printText}}</div>
    <app-custom-template
      (inputKeyDownEnter)="inputKeyDownEnter"
      (clearButtonClick)="clearButtonClick"
    >
    </app-custom-template>
  `,
})
export class ChildComponent extends ParentComponent {

  constructor() {
    super();
  }

  @HostListener('keydown.enter', ['$event'])
  onKeyDownChild(event: any) {
    console.log('Only here :( !');
  }

}

TemplateComponent：

import {Component, Output, EventEmitter} from '@angular/core';

@Component({
  selector: 'app-custom-template',
  template: `
    <input 
      type="text"
      name="my_text"
      (keyup.Enter)="inputKeyDownEnter.emit($event)"
      />
    <button
      type="button"
      (click)="clearButtonClick.emit($event)">Clear</button>
  `,
})
export class CustomTemplateComponent {

  @Output()
  inputKeyDownEnter = new EventEmitter<any>();

  @Output()
  clearButtonClick = new EventEmitter<any>();

  constructor() {
  }

}