Как создать сенсорные события, используя версию Angular 2+? - PullRequest
Новая
       36

Как создать сенсорные события, используя версию Angular 2+?

0 голосов
/ 29 мая 2020

Как создать angular сенсорных событий, потому что angular не имеет встроенных сенсорных событий, таких как (щелчок) et c?

Ответы [ 2 ]

0 голосов
/ 31 мая 2020 
import { Component, HostListener } from '@angular/core';

@Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    defaultTouch = { x: 0, y: 0, time: 0 };

    @HostListener('touchstart', ['$event'])
    //@HostListener('touchmove', ['$event'])
    @HostListener('touchend', ['$event'])
    @HostListener('touchcancel', ['$event'])
    handleTouch(event) {
        let touch = event.touches[0] || event.changedTouches[0];

        // check the events
        if (event.type === 'touchstart') {
            this.defaultTouch.x = touch.pageX;
            this.defaultTouch.y = touch.pageY;
            this.defaultTouch.time = event.timeStamp;
        } else if (event.type === 'touchend') {
            let deltaX = touch.pageX - this.defaultTouch.x;
            let deltaY = touch.pageY - this.defaultTouch.y;
            let deltaTime = event.timeStamp - this.defaultTouch.time;

            // simulte a swipe -> less than 500 ms and more than 60 px
            if (deltaTime < 500) {
                // touch movement lasted less than 500 ms
                if (Math.abs(deltaX) > 60) {
                    // delta x is at least 60 pixels
                    if (deltaX > 0) {
                        this.doSwipeRight(event);
                    } else {
                        this.doSwipeLeft(event);
                    }
                }

                if (Math.abs(deltaY) > 60) {
                    // delta y is at least 60 pixels
                    if (deltaY > 0) {
                        this.doSwipeDown(event);
                    } else {
                        this.doSwipeUp(event);
                    }
                }
            }
        }
    }

    doSwipeLeft(event) {
        console.log('swipe left', event);
    }

    doSwipeRight(event) {
        console.log('swipe right', event);
    }

    doSwipeUp(event) {
        console.log('swipe up', event);
    }

    doSwipeDown(event) {
        console.log('swipe down', event);
    }
}
0 голосов
/ 29 мая 2020

Вы можете создать прослушиватели событий или назначить функции для событий объекта window в компонентах OnInit . Пример закрытия раскрывающегося списка при нажатии вне раскрывающегося списка.

шаблон 

<div class="dropdown">
  <button (click)="optionsDropdownActive = !optionsDropdownActive" class = "dropdown-button">
    dropdown
  </button>
  <div *ngIf="optionsDropdownActive" class = "dropdown-list">
      <a href="#" class="dropdown-item">Item 1</a>
      <a href="#" class="dropdown-item">Item 2</a>
  </div>
</div>

компонент 

optionsDropdownActive = false;

ngOnInit () {
    window.onclick = (e) => {
      if(!e.target.matches('.dropdown *') ) {
        this.optionsDropdownActive = false;
      }
    }

    window.ontouchstart =(e) => {
      if(!e.target.matches('.dropdown *')) {
        this.optionsDropdownActive = false
      }
    }
 }
...