Ionic image preview modal(NOT working), tried to add zooming

image-preview-modal-page.ts

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

@Component({
  selector: 'page-image-preview-modal',
  templateUrl: 'image-preview-modal.html',
})
export class ImagePreviewModalPage {
  @ViewChild('myImg') myImg:ElementRef;

  private title: string;
  private imageUrl: string;
  private index: string;
  private canDelete: boolean = false;

  private evCache = [];
  private prevDiff = -1;

  constructor(public navCtrl: NavController,
              public navParams: NavParams,
              public viewCtrl: ViewController) {
    this.title = this.navParams.get('title');
    this.imageUrl = this.navParams.get('imageUrl');
    this.index = this.navParams.get('index'); // 原图片组的序号, 在这里删除图片时传过去用的
    this.canDelete = this.navParams.get('canDelete');
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ImagePreviewModalPage');
  }

  pointerdown_handler(ev) {
    // The pointerdown event signals the start of a touch interaction.
    // This event is cached to support 2-finger gestures
    this.evCache.push(ev);
//		console.log("pointerDown", ev);
  }

  pointermove_handler(ev) {
    // This function implements a 2-pointer horizontal pinch/zoom gesture.
    //
    // If the distance between the two pointers has increased (zoom in),
    // the taget element's background is changed to "pink" and if the
    // distance is decreasing (zoom out), the color is changed to "lightblue".
    //
    // This function sets the target element's border to "dashed" to visually
    // indicate the pointer's target received a move event.
//		console.log("pointerMove", ev);
    ev.target.style.border = "dashed";
    // Find this event in the cache and update its record with this event
    for (let i = 0; i < this.evCache.length; i++) {
      if (ev.pointerId == this.evCache[i].pointerId) {
        this.evCache[i] = ev;
        break;
      }
    }
    // If two pointers are down, check for pinch gestures
    if (this.evCache.length == 2) {
      // Calculate the distance between the two pointers
      let curDiff = Math.abs(this.evCache[0].clientX - this.evCache[1].clientX);
      if (this.prevDiff > 0) {
        if (curDiff > this.prevDiff) {
          console.log('放大');
          // The distance between the two pointers has increased
//					console.log("Pinch moving OUT -> Zoom in", ev);
        }
        if (curDiff < this.prevDiff) {
          // The distance between the two pointers has decreased
//					console.log("Pinch moving IN -> Zoom out",ev);
          console.log('缩小');
        }

        // 都带着正负号
        let oldWidth = parseInt(ev.target.style.width.split('px')[0]);
        let oldHeight = parseInt(ev.target.style.width.split('px')[0]);
//					console.log('old width: ', width, curDiff, this.prevDiff);
        let newWidth = oldWidth;
        if (oldWidth) {
          newWidth = oldWidth + (curDiff - this.prevDiff);
        }
        let newHeight = newWidth / oldWidth * oldHeight;
//						console.log('new width:', newWidth);
        ev.target.style.width = newWidth + 'px';
        ev.target.style.height = newHeight + 'px';
      }
      // Cache the distance for the next move event
      this.prevDiff = curDiff;
    }
  }

  pointerup_handler(ev) {
//		console.log(ev.type, ev);
    // Remove this pointer from the cache and reset the target's
    // background and border
    this.remove_event(ev);

    // If the number of pointers down is less than two then reset diff tracker
    if (this.evCache.length < 2) this.prevDiff = -1;
  }

  remove_event(ev) {
    // Remove this event from the target's cache
    for (let i = 0; i < this.evCache.length; i++) {
      if (this.evCache[i].pointerId == ev.pointerId) {
        this.evCache.splice(i, 1);
        break;
      }
    }
  }

  ngAfterViewInit() {
    console.log('init Pinch');
    console.log(this.myImg);

    // Install event handlers for the pointer target
    let el = this.myImg.nativeElement;
    console.log(el);
    el.onpointerdown = this.pointerdown_handler;
    el.onpointermove = this.pointermove_handler;
    // Use same handler for pointer{up,cancel,out,leave} events since
    // the semantics for these events - in this app - are the same.
    el.onpointerup = this.pointerup_handler;
    el.onpointercancel = this.pointerup_handler;
    el.onpointerout = this.pointerup_handler;
    el.onpointerleave = this.pointerup_handler;
  }


  goBack() {
    this.viewCtrl.dismiss({
      isDeleted: false,
      index: this.index,
    });
  }

  deleteAndGoBack() {

    // last straw
    if (!this.canDelete) {
      this.goBack();
      return;
    }

    this.viewCtrl.dismiss({
      isDeleted: true,
      index: this.index,
    });
  }

}