Angular4 directiveで取得したイベント通知をコンポーネントに反映させたい

ボタンを配置したコンポーネントで、
クリックイベントは反応していたのですが、タッチの場合、長押しなどがとれなかったので
Directiveにイベントを登録してみました。

ボタンを押すことで★が通ることを確認できたのですが、
TouchDirectiveのonTouchstartで感知したあと、
TouchComponentに対し処理を行うにはどのようにすればよいのでしょうか？
onAButtonのような処理を実行させたいです。

◆touch.directive.ts

import { Directive, ElementRef, HostListener, Input } from '@angular/core';

@Directive({
    selector: '[myTouch]'
})
export class TouchDirective {

    constructor(private el: ElementRef) { }

    @HostListener('touchend') onTouchstart() {
        console.log('touchend!!');★
    }
}

※コンポーネントのモジュールに以下を追加しています。

  declarations: [
    TouchDirective
  ],

◆touch.component.html

<div class="container">
    <div class="wrapper">
         <button myTouch name="a-button" type="button"  (click)="onAButton()" [attr.disabled]="ADisabled">A</button>
         <button myTouch name="b-button" type="button"  (click)="onBButton()" [attr.disabled]="BDisabled">B</button>
    </div>
</div>

◆touch.component.ts

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

@Component({
～～
})

export class TouchComponent implements OnInit {

  ADisabled: boolean;
  BDisabled: boolean;

  ngOnInit(): void {
    this.ADisabled = null;
    this.BDisabled = true;
  }

  private onAButton() {
    console.log('onAButton');
    this.ADisabled = true;
    this.BDisabled = null;
  }
  private onBButton() {
    console.log('onBButton');
    this.ADisabled = null;
    this.BDisabled = true;
  }

}