38430


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

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

◆touch.directive.ts

[code]

    import { Directive, ElementRef, HostListener, Input } from '@angular/core';
    
    @Directive({
        selector: '[myTouch]'
    })
    export class TouchDirective {
    
        constructor(private el: ElementRef) { }
    
        @HostListener('touchend') onTouchstart() {
            console.log('touchend!!');★
        }
    }
    
[/code]

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

[code]

      declarations: [
        TouchDirective
      ],
    
[/code]

◆touch.component.html

[code]

    <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>
    
[/code]

◆touch.component.ts

[code]

    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;
      }
    
    }
    
[/code]


CC BY-SA 3.0
2017-10-04T09:50:33.730
38425
2017-10-04T12:22:46.757
12842
question
angular4
Angular4　directiveで取得したイベント通知をコンポーネントに反映させたい


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

[DEMO](https://plnkr.co/edit/rsTNxqDAkcqWJFkb4xOm?p=preview)

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

**touch.directive.ts**

[code]

    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();
        }
    }
    
[/code]

**touch.component.html**

[code]

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

**touch.component.ts**

[code]

      onATouch() {
        console.log('A tapped');
      }
    
[/code]


CC BY-SA 3.0
2017-10-04T12:22:46.757
38430
2017-10-04T12:22:46.757
20206
38425
answer