Hammerjs 配置用于 Angular 中的捏缩放答案

【问题标题】：Hammerjs configuration for pinch zoom in AngularHammerjs 配置用于 Angular 中的捏缩放
【发布时间】：2018-03-26 20:13:57
【问题描述】：

我正在使用带有 Angular 4 应用程序的 HammerJS 来缩放图像。在hammerJS doc中提到默认捏缩放设置为关闭，打开它的代码是

hammertime.get('pinch').set({ enable: true });

谁能帮我什么是 angular 4 等价物，以及在 angular 4 中使用锤捏缩放所需的其他配置是什么？

【问题讨论】：

标签： angular hammer.js

【解决方案1】：

你的问题很模糊。尽管被问到，以下内容很可能是您正在寻找的内容：

您首先需要在项目中执行 npm install 以引入hammerjs 库：npm install --save hammerjs

然后在您的视图/组件中，您需要获取对您有兴趣使用hammer.js 监听事件的元素的引用。

下面是一个示例，说明如何通过对 cli 生成的默认项目进行少量修改来做到这一点。

app.component.html

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <img #img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>
<h2>Here are some links to help you start: </h2>
<ul>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://angular.io/tutorial">Tour of Heroes</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://github.com/angular/angular-cli/wiki">CLI Documentation</a></h2>
  </li>
  <li>
    <h2><a target="_blank" rel="noopener" href="https://blog.angular.io/">Angular blog</a></h2>
  </li>
</ul>

app.component.ts

import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';

import * as Hammer from 'hammerjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  @ViewChild('img') imgElement: ElementRef;
  title = 'app';

  ngAfterViewInit(): void {
    const hammer = new Hammer(this.imgElement.nativeElement);
    // hammer.on('press', function(e) {
    //   e.target.classList.toggle('expand');
    //   console.log('You\'re pressing me!');
    //   console.log(e);
    // });

    hammer.get('pinch').set({ enable: true });
  }
}

GitHub上的完整答案代码。

【讨论】：

谢谢！这就是我一直在寻找的。span>