"
异常: 抛出“EXCEPTION: Hammer.js未加载,无法绑定swipeleft事件”,是因为需要将hammerjs包含在页面中。
示例:
<script src="node_modules/hammerjs/hammer.js"></script>
我已经阅读了所有关于如何在angular中使用hammerjs的其他答案,它们看起来都很hacky。
默认情况下,HammerJs禁用了SwipeDown和SwipeUp方法。所有之前的回答都不是解决手势问题或覆盖hammer的默认设置的正确的angular2 typescript方式。
这让我花费了约4个小时来深入研究angular2和hammerjs的提交。
首先,我们需要为angular2获取hammerjs类型定义。
"
typings install github:DefinitelyTyped/DefinitelyTyped/hammerjs/hammerjs.d.ts#de8e80dfe5360fef44d00c41257d5ef37add000a --global --save
下一步,我们需要创建自定义的覆盖配置类。这个类可以用来覆盖所有默认的 hammerjs 和 angular2 hammerjs 配置设置。
hammer.config.ts:
import { HammerGestureConfig } from '@angular/platform-browser';
import {HammerInstance} from "@angular/platform-browser/src/dom/events/hammer_gestures";
export class HammerConfig extends HammerGestureConfig {
buildHammer(element: HTMLElement): HammerInstance {
var mc = new Hammer(element);
mc.get('pinch').set({ enable: true });
mc.get('rotate').set({ enable: true });
mc.add( new Hammer.Swipe({ direction: Hammer.DIRECTION_ALL, threshold: 0 }) );
for (let eventName in this.overrides) {
mc.get(eventName).set(this.overrides[eventName]);
}
return mc;
}
}
我们需要做的最后一件事是打开我们的主 Bootstrap 文件,并将我们的自定义配置插入到 bootstrap 方法中,如下所示:
import { HammerConfig } from './shared/hammer.config';
bootstrap(AppComponent, [
provide(HAMMER_GESTURE_CONFIG, { useClass: HammerConfig })
]);
现在在我们的应用程序中,我们可以使用swipeDown和swipeUp。
<div class="some-block" (swipeDown)="onSwipeDown"></div>
这个 pull request 让我能够覆盖默认设置,并为我找到正确的方法提供了一个起点。你可以在下面的链接中查看更多信息:
https://github.com/angular/angular/pull/7924。
setTimeout
中,因为我在AfterContentInit
中设置了我的内容,但我也没有在组件上进行hammerInitialized
检查。 - Eric Gonzalo