Angular 角度拖动、工具提示和单击

我在Angular 5中使用可拖放插件。文档链接：

我有一个要求，我需要显示一个弹出式点击一个div，其中draggable应用。我正在使用以下代码：

    <div class="circle" mwlDraggable [dropData]="{event: event}"  [dragAxis]="{x: event.draggable, y: event.draggable}" (dragStart)="fromEng = eng.id"  (click)="handleEvent(event, true)">
       <ng-container  *ngTemplateOutlet="tooltipBlock"></ng-container>
    </div>


    <ng-template #tooltipBlock>
     <span class="tooltiptext" >{{ event.title }}</span>
    </ng-template>

{{event.title}}

---

在这里，单击事件不会在第一次单击时触发。它在第二次单击后启动。我需要的是，当我们按住并移动元素时，可以拖动工作，只需单击鼠标即可调用

handleEvent

函数。我已经尝试过鼠标点击，但也不起作用。

我在工具提示上添加了点击事件，然后它就起作用了

<ng-template #tooltipBlock>
    <span class="tooltiptext" (click)="handleEvent(event, true)">{{ event.title }}</span>
</ng-template>

然后在app.module.ts中导入

hammerjs

：

import 'hammerjs';

然后更新代码：

<div class="circle" mwlDraggable [dropData]="{event: event}"  [dragAxis]="{x: event.draggable, y: event.draggable}" (dragStart)="fromEng = eng.id"  (tap)="handleEvent(event, true)">
   <ng-container  *ngTemplateOutlet="tooltipBlock"></ng-container>
</div>


<ng-template #tooltipBlock>
 <span class="tooltiptext" >{{ event.title }}</span>
</ng-template>

{{event.title}}

<div class="circle" mwlDraggable [dropData]="{event: event}"  [dragAxis]="{x: event.draggable, y: event.draggable}" (dragStart)="fromEng = eng.id"  (tap)="handleEvent(event, true)">
   <ng-container  *ngTemplateOutlet="tooltipBlock"></ng-container>
</div>


<ng-template #tooltipBlock>
 <span class="tooltiptext" >{{ event.title }}</span>
</ng-template>