Angular是一个优秀的前端框架。伴随着不断更新,在它的发行版中不断添加新特性和修改,这是一件好事。但有时我们在前一个版本中使用的内容在最新版本中会停止工作。HammerJS也是如此。
Hammer.js是一个开源的,轻量级的javascript库,它可以在不需要依赖其他东西的情况下识别触摸,鼠标事件。您可以在这里阅读有关HammerJS及其文档的更多信息。
在Angular 9以上,例如Angular 10中,如果您使用以前添加HammerJS的方法,它将不起作用,因为Angular修改了它的一些特性。所以你需要重新在Angular 9、Angular 10中加入HammerJS。
方法:
方法是在本地安装 hammerjs 包,将其导入main.ts 中,然后通过扩展HammerGestureConfig 类来设置 Hammer 手势配置。然后,您可以绑定到特定事件,如轻扫、平移、捏合、按压等。最重要的是在应用模块文件中导入 HammerModule。
示例和说明:轻扫手势
- 在角项目中,通过运行以下命令在本地安装 hammerjs 包。
-
npm install --save hammerjs
- 现在,您需要导入main.ts文件中的hammerjs模块。如果不导入此,将在您的主机中收到错误。错误:Hammer.js 未加载,无法绑定到 XYZ 事件。
-
import 'hammerjs';
- 让我们转到我们的app.module.ts,在这里您可以使用HammerGestureConfig类添加自己的 Hammer 手势配置HAMMER_GESTURE_CONFIG如下图所示。
还要确保导入 HammerModule,因为当前修改在Angular 10中已经完成。
否则,您的项目将不起作用,不会给出错误。(虽然这在类型脚本中,但编辑器不支持,但忽略,不要混淆。app. module. ts// 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 { }
- 现在,我们将创建我们简单的示例,用于轻扫手势。对于app.component.html,可以添加以下代码。
app.component.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 中向示例添加一些样式,像这样。需要注意的重要一点是,您希望在滑动手势的地方,将user-select设置为"none"。 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 中添加您的typescript 代码。
// 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>`; } }
有几个其他手势,你可以实现使用哈默JS就像那样。有关详细信息,请阅读他们的文档。
最新评论