Angular Material CDK Drop 事件未触发

Question

我正在尝试使用 Angular 材质拖放一个自由节点。它不是列表的一部分，但我想知道该项目何时被删除。我不确定如何绑定到此事件。

我只是想知道节点何时被删除。

到目前为止，这是我的代码：

    <svg id="svgCanvas" >

    <g *ngFor="let link of linkPaths">
        <path [attr.d]="link"></path>
    </g>

    <g *ngFor="let node of nodes" id="nodesGroup">
        <circle class="node" [attr.cx]="node.x" [attr.cy]="node.y + 45" [attr.r]="settings.nodes.radius"
            (click)="nodeClick($event)"  (dragEnd)="drop($event, node)" [attr.data-selected]="node.data.selected" cdkDrag cdkDragBoundary="#svgCanvas" ></circle>
    </g>

</svg>

我希望触发 DragEnd 事件并在组件代码中调用我的放置函数。

private drop(event) {
   console.log('drag end')
}

点击事件似乎有效，但放置不会触发。

我可以看到列表支持拖放功能，但我没有对列表使用拖放功能。这些是自由移动的节点。

Answer 1

使用 (cdkDragEnded) 事件 (cdkDragEnded)="drop($event, node)"。

https://material.angular.io/cdk/drag-drop/api

堆栈闪电战：https://stackblitz.com/edit/angular-fk9wpa

<div class="example-box" (cdkDragEnded)="drop($event)" cdkDrag>
  Contents of dragable element
</div>

在你的情况下：

    <g *ngFor="let node of nodes" id="nodesGroup">
        <circle class="node" [attr.cx]="node.x" [attr.cy]="node.y + 45" [attr.r]="settings.nodes.radius" (click)="nodeClick($event)" (cdkDragEnded)="drop($event, node)" [attr.data-selected]="node.data.selected" cdkDrag cdkDragBoundary="#svgCanvas" ></circle>
    </g>