angle keyupイベントは、子コンポーネントではなく、親コンポーネントでトリガーされません

Question

アプリケーション内で複数のバージョンを使用したいコンポーネントを作成しました。すべてのロジックを1つの場所すべてのコードが存在するParentComponent。

しかし、角度はコンポーネントの注釈を継承しないので、コードの重複を防ぐために「TemplateComponent」も作成しました。 TemplateComponentは入力を保持しますが、入力からイベントを処理するのはParentComponentです。そうすれば、すべてのChildComponentはロジックのParentComponentを継承し、そのテンプレートはTemplateComponentのインスタンスです。

大したことは、TemplateComponent内の入力でkeyupイベントを鳴らそうとすると、ClickイベントがChildComponentで呼び出されていることです。入力やコントロールはありません。

テンプレートコンポーネントにイベントバインディングを渡して、キーアップ入力を接続しようとしましたが、トリガーしません。

ChildComponentには、イベントのみがトリガーされていることをデバッグするためのHostListenerがあります。それが原因でイベントがそこで止まるわけではありません。

keydownイベントをテンプレートコンポーネント内で呼び出さなければならないということを示す方法や、すべてを他のものにリンクする別の方法はありますか？

私は作業plunkerを持って、それはかなり自明です：

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() { 
    } 

} 

Answer 1

あなたは方法

(inputKeyDownEnter)="inputKeyDownEnter($event)" 
             ^^^^^^^^^ 

Plunker