区分 cdkDrag 并点击 angular

Question

我有一个我使用过的可拖动元素，它对我cdkDrag来说很好用。现在，我需要在点击元素时切换一个标志。但是当我拖动元素并放下时，点击事件会触发。能否请你建议如何工作，cdkDrag和click在一起。共享相同的代码片段。

        <div class="draggable-content" cdkDragBoundary=".drop-area" cdkDrag>
          <div class="min-workspace-view" *ngIf="showMinWorkspace === true">
            <mat-icon svgIcon="workspace" class="workspace-icon"
              (click)="$event.stopPropagation(); showMinWorkspace = !showMinWorkspace">
            </mat-icon>
          </div>
        </div>

期望是：当元素被拖动然后点击不应触发。当元素被点击时，则不应触发拖动事件。

Answer 1

我得到了一个解决方案。

您需要一个布尔属性。让我们称之为dragging。

在您的cdkDrag元素上，添加一个cdkDragStarted回调，该回调将此属性设置为true。然后在您的click回调中，如果this.dragging为真，则将其设置为假并返回。嘿普雷斯托！

在这里工作 stackblitz https://stackblitz.com/edit/angular-drag-drop-and-clickable-element