在Angular 9中使用HammerJS的鼠标滑动控件

Angular是一个应用程序设计框架和开发平台，用于创建高效和复杂的单页应用程序。从它的第一个版本开始，它已经发生了很大的变化。而且它不断地在其版本中添加新的功能和修改，这是一件好事。但有时我们在以前的版本中使用的东西在最新的版本中停止工作。HammerJS的情况也是如此。

HammerJS是一个非常好的开源库，可以识别由触摸、鼠标和指针事件组成的手势。你可以在这里阅读更多关于HammerJS和它的文档。

在Angular 9中，如果你使用以前的方法来添加HammerJS，它将无法工作，因为Angular已经修改了它的一些功能。所以你将从头开始经历在Angular 9中使用HammerJS的整个过程。

步骤:

方法是在本地安装hammerjs包，在main.ts中导入它，并通过扩展HammerGestureConfig类来设置Hammer手势配置。然后你就可以绑定特定的事件，比如说滑动、平移、捏、按等等。最重要的是在app模块文件中导入HammerModule。

例子和解释。轻扫手势
* 在你的angular项目中，通过运行以下命令在本地安装hammerjs包。

npm install --save hammerjs

现在，你需要在你的main.ts文件中导入hammerjs模块。如果你没有导入，你会在控制台得到一个错误。Error:Hammer.js没有被加载，不能与XYZ事件绑定。

import 'hammerjs';

让我们进入app.module.ts，在这里你可以使用HammerGestureConfig类和HAMMER_GESTURE_CONFIG添加你自己的Hammer手势配置，就像下面的图片一样。
还要确保导入HammerModule，因为它是目前在Angular 9中已经完成的修改。
否则你的项目将无法工作，也不会出现错误。(虽然这是用typescript写的，但是编辑器还不支持，所以请忽略，不要混淆。)

app.module.ts
“`javascript // add this in your app.module.ts
import { NgModule, Injectable } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
// particular imports for hammer
import * as Hammer from 'hammerjs';
import {
HammerModule, HammerGestureConfig, HAMMER_GESTURE_CONFIG}
from '@angular/platform-browser';
import { AppComponent } from './app.component';

@Injectable()
export class MyHammerConfig extends HammerGestureConfig {
  overrides = <any> {
    swipe: { direction: Hammer.DIRECTION_ALL },
  };
}

@NgModule({
  imports:      [ BrowserModule, FormsModule, HammerModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ],
  providers: [
    {
      provide: HAMMER_GESTURE_CONFIG,
      useClass: MyHammerConfig,
    },
  ],
})
export class AppModule { }

<pre><code class=" line-numbers"><br />* 现在我们将创建我们简单的刷卡手势的例子。对于app.component.html，你可以添加以下代码。
**app.component.html**
“`html
<!–add this in your app.component.html –>
<div class=”swipe” (swipe)=”onSwipe($event)”>
  <h1>Swipe Gesture</h1>
  <p>Works with both mouse and touch.</p>
  <h5 [innerHTML]=”direction”></h5>
</div>

像这样在app.component.css中给你的例子添加一些样式。需要注意的是，在你想要滑动手势的地方，将用户选择设置为无。

app.component.css

.swipe {
    background-color: #76b490;
    padding: 20px;
    margin: 10px;
    border-radius: 3px;
    height: 500px;
    text-align: center;
    overflow: auto;
    color: rgb(78, 22, 131);
    user-select: none;
}
h1,
p {
    color: rgb(116, 49, 11);
}

最后，在app.component.ts中加入你的typecript代码，像这样。

// add this in your app.component.ts
import { Component } from "@angular/core";
  
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  direction = "";
  
  onSwipe(event) {
 const x =
   Math.abs(
event.deltaX) > 40 ? (event.deltaX > 0 ? "Right" : "Left") : "";
 const y =
   Math.abs(
event.deltaY) > 40 ? (event.deltaY > 0 ? "Down" : "Up") : "";
  
    this.direction += 
`You swiped in <b>  ${x}$ {y} </b> direction <hr>`;
  }
}

输出:
在Angular 9中使用HammerJS的鼠标滑动控件