向自定义组件添加手势答案

【问题标题】：Add gesture to custom component向自定义组件添加手势
【发布时间】：2017-08-30 19:57:19
【问题描述】：

我有一个自定义菜单，因为我需要一个具有特定功能和行为的菜单，并且修改 Ionic 的菜单组件似乎对我的需要来说工作量太大，所以这是我的问题：

菜单应该有一个向右滑动手势，如果您从左向右滑动/拖动，菜单就会显示出来。即使顶部有“三明治”图标，一些用户也试图通过拖动/滑动来获取菜单，因此它也需要有一个手势。

这是我的app.html

<wabiz-menu [ngClass]="{'menuNotShown': !isMenuShown, 'menuShown': isMenuShown }" *ngIf="logedIn" (swipe)="swipeMenu($event)"></wabiz-menu>

<!-- Disable swipe-to-go-back because it's poor UX to combine STGB with side menus -->
<ion-nav [root]="rootPage" #content swipeBackEnabled="false" [ngClass]="{'menu-not-shown': logedIn }"></ion-nav>

如您所见，我的菜单中有一个(swipe) 手势，但它不起作用。我也尝试在我的<ion-nav> 中实现它，但我的swipeMenu 函数永远不会执行。

到目前为止，我还没有从我的菜单 .ts 文件中尝试过任何东西。

我是否需要使用另一个事件而不是 (swipe)？我应该在我的自定义菜单.ts 文件上创建一个事件吗？我应该声明某种事件类型的@input() 以便可以调用它吗？

欢迎任何想法。提前致谢

【问题讨论】：

标签： angular typescript ionic2 ionic3 hammer.js

【解决方案1】：

由于您没有使用Ionic component（即您使用的是custom menu 组件），因此您必须使用Hammerjs 实现Gesture（即swipe）功能。否则，它将不起作用。

您可以在这里找到Hammer.Swipe(options)。

【讨论】：

很好，我会尽快尝试并通知您。
工作就像一个魅力，不得不搜索一些关于在 Angular 中使用它的教程，但事实证明 Angular 已经在@angular/platform-browser 中对其配置提供了一些支持。谢谢大佬。