Ionic 4でGestureを実装する方法（Angular）

Ionic 4では、First Meaningful Paintの向上を目指しており、デフォルトでできるだけ不要なライブラリは読み込まないようになっています。 (tap) や (press) 、 (swipe) などのジェスチャーイベントを実装することができる hammer.js も例外ではなく、もし必要な場合は自分で追加実装することが必要になりました。

追加で実装してみます。

まずはnpmでインストールします。

npm i hammerjs --save

そして、Angularプロジェクト全体で読み込むために、 src/main.ts に、一行追加します。

src/main.ts

+ import 'hammerjs';

これで使えるようになるのですが、hammerjsはデフォルトでは設定している要素のイベントを阻害します。例えば「pressを設定してる要素の上でスワイプがきかなくなる」など、そういうことです。なので、それを可能にするために、Angularでイベントの設定をします。

src/app/app.module.ts に以下を追記します。

src/app/app.module.ts

+ import { BrowserModule, HammerGestureConfig, HAMMER_GESTURE_CONFIG } from '@angular/platform-browser';

+ @Injectable()
+ export class IonicGestureConfig extends HammerGestureConfig {
+   buildHammer(element: HTMLElement) {
+     const mc = new (<any>window).Hammer(element);
+     for (const eventName of Object.keys(this.overrides)) {
+       mc.get(eventName).set(this.overrides[eventName]);
+     }
+     return mc;
+   }
+ }

@NgModule({
.
.
.
  providers: [
+     { provide: HAMMER_GESTURE_CONFIG, useClass: IonicGestureConfig },
  ]

これで、v3同様に様々なGestureが使えるようになりました。

それでは、また。