捏和旋转相同的元素

Question

我正在尝试收缩和旋转事件，以一次在同一元素上工作。 我不知道该怎么做，因为每次我尝试捏时，都会触发rotate事件，并且图像开始旋转。如果只尝试旋转也一样：图像开始放大或缩小。

这些是模板和控制器：

模板：

<ion-header>

  <ion-navbar>
    <ion-title>imageEdit</ion-title>
  </ion-navbar>

</ion-header>

<ion-content>
    <img #img src="https://www.w3schools.com/w3css/img_lights.jpg">
  <div>
    <button ion-button>Text</button>
  </div>
</ion-content>

控制器：

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController, Gesture } from 'ionic-angular';

@Component({
  selector: 'page-image-edit',
  templateUrl: 'image-edit.html',
})
export class ImageEditPage {

  @ViewChild('img') imgElem: ElementRef;
  img: HTMLImageElement;
  gesture: Gesture;

  constructor() {} 

  ionViewDidLoad() {
    this.img = this.imgElem.nativeElement;

    if(!this.img){
      alert('Cannot get img element!');
      return;
    }
    this.img.style.width = '100%';
    this.img.style.height = 'auto';

    this.attachGestures();
  }

  attachGestures(){
    this.gesture = new Gesture(this.imgElem.nativeElement);
    this.gesture.listen();
    this.gesture.on('rotate', (e) =>{
      console.log('rotation');
    });
    this.gesture.on('pinch', (e) =>{ 
      console.log('pinching');
    });
  }
}