如何在 Angular 10 中使用鼠标滑动拖拽控件 HammerJS

Angular是一个优秀的前端框架。伴随着不断更新,在它的发行版中不断添加新特性和修改,这是一件好事。但有时我们在前一个版本中使用的内容在最新版本中会停止工作。也是如此。

Hammer.js是一个开源的,轻量级的javascript库,它可以在不需要依赖其他东西的情况下识别触摸,鼠标事件。您可以在这里阅读有关及其文档的更多信息。

在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 '@/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>`; 
      } 
    }

输出:
如何在 Angular 10 中使用鼠标滑动拖拽控件 HammerJS

有几个其他手势,你可以实现使用哈默JS就像那样。有关详细信息,请阅读他们的文档