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

投稿者: Anonymous

ボタンを配置したコンポーネントで、
クリックイベントは反応していたのですが、タッチの場合、長押しなどがとれなかったので
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;
  }

}

解決

https://www.mbejda.com/angular-4-propagating-events-from-directives-to-parent-components/
ちょうどこの記事が、directiveからeventを送る方法を説明しています。

DEMO

今の場合、@Outputを追加して、このdirectiveを使用しているcomponentがeventを受け取れるようにします。

touch.directive.ts

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

@Directive({
    selector: '[myTouch]'
})
export class TouchDirective {
    constructor(private el: ElementRef) { }

    @Output('onTouch') handler: EventEmitter<any> = new EventEmitter();

    @HostListener('touchend') onTouchstart() {
        this.handler.emit();
    }
}

touch.component.html

  <button myTouch (onTouch)="onATouch()" ... >A</button>

touch.component.ts

  onATouch() {
    console.log('A tapped');
  }
回答者: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *