Angular 打底树捕捉阻力&；丢弃事件

我正在使用Priming tree组件，并希望通过节点实现复制和移动功能（通过使用拖放）。实际上，内置的“移动”工作正常，但为了实现“复制”，我想知道是否按下了ctrl键，如果按下了，则在两个位置（上一个和新的）创建一个相同的节点。我本想去看onDragStart和onDragEnd的比赛，但似乎不起作用

我尝试了以下代码：

以下是组件：

import { Component, OnInit } from '@angular/core';
import { TreeModule,TreeNode,ContextMenuModule,MenuItem, TreeDragDropService} from 'primeng/primeng';

import { NodeService } from './prime-tree.service'


@Component({
  selector: 'prime-tree',
  styleUrls: ['./prime-tree.style.scss'],
    template: `
<p-tree
    [value]="files"
    selectionMode="single"
    [selection]="selection"
                    draggableNodes="true"
                    droppableNodes="true"    
>
    <template let-node pTemplate type="default">
        <span
            pDraggable="treedragdrop"
            pDroppable="treedragdrop"
            (onDragStart)="onDragStart($event, node)"
            (onDragEnd)="onDragEnd($event, node)"
            (onDrop)="onDrop($event, node)"
            (onDragEnter)="onDragEnter($event, node)"
            (onDragLeave)="onDragLeave($event, node)"
        >
            {{node.label}}
        </span>
        <input [(ngModel)]="node.label" type="text" style="width:100%">
    </template>
</p-tree>
    `,
  //templateUrl: './prime-tree.template.html'
})

export class PrimeTreeComponent implements OnInit {

    private cmItems: MenuItem[];

    files: TreeNode[];
    selection: TreeNode;
    selectedFiles: TreeNode[];

    // constructor() {}
    constructor(private nodeService: NodeService) {}

    ngOnInit() {
        console.log('PrimeTreeComponent init')
        this.nodeService.getFiles().then(files => this.files = files);
        this.cmItems = [
            {
                label: 'File',
                items: [{
                        label: 'New', 
                        icon: 'fa-plus',
                        items: [
                            {label: 'Project'},
                            {label: 'Other'},
                        ]
                    },
                    {label: 'Open'},
                    {label: 'Quit'}
                ]
            },
            {
                label: 'Edit',
                icon: 'fa-edit',
                items: [
                    {label: 'Undo', icon: 'fa-mail-forward'},
                    {label: 'Redo', icon: 'fa-mail-reply'}
                ]
            }
        ];
    }

    nodeSelect(event) {
        //event.node = selected node
        console.log("selected node", event, event.node, this.selectedFiles);
    }

    onDragStart(event, node) {
        console.log("onDragStart", event ,node);
    }
    onDragEnd(event, node) {
        console.log("onDragEnd", event ,node);
    }
    onDrop(event, node) {
        console.log("onDrop", event ,node);
    }
    onDragEnter(event, node) {
        console.log("onDragEnter", event ,node);
    }
    onDragLeave(event, node) {
        console.log("onDragLeave", event ,node);
    }

}

从'@angular/core'导入{Component，OnInit}；
从'priming/priming'导入{TreeModule，TreeNode，ContextMenuModule，MenuItem，TreeDragDropService}；
从“./prime tree.service”导入{NodeService}
@组成部分({
选择器：'素数树'，
styleUrls:['./prime tree.style.scss']，
模板：`
{{node.label}
`,
//templateUrl:“./prime tree.template.html”
})
导出类PrimeTreeComponent实现OnInit{
私有cmItems:MenuItem[]；
文件：TreeNode[]；
选择：TreeNode；
所选文件：TreeNode[]；
//构造函数（）{}
构造函数（私有节点服务：节点服务）{}
恩戈尼尼特（）{
console.log（'PrimeTreeComponent init'）
this.nodeService.getFiles（）.then（files=>this.files=files）；
this.cmItems=[
{
标签：“文件”，
项目：[{
标签：“新”，
图标：“fa plus”，
项目：[
{label:'Project'}，
{标签：'其他'}，
]
},
{标签：'打开'}，
{标签：“退出”}
]
},
{
标签：“编辑”，
图标：“fa编辑”，
项目：[
{标签：“撤消”，图标：“fa邮件转发”}，
{标签：“重做”，图标：“fa邮件回复”}
]
}
];
}
节点选择（事件）{
//event.node=所选节点
log（“所选节点”、事件、event.node、this.selectedFiles）；
}
onDragStart（事件，节点）{
log（“onDragStart”、事件、节点）；
}
onDragEnd（事件、节点）{
日志（“onDragEnd”、事件、节点）；
}
onDrop（事件、节点）{
日志（“onDrop”，事件，节点）；
}
onDragEnter（事件、节点）{
日志（“onDragEnter”、事件、节点）；
}
onDragLeave（事件、节点）{
日志（“onDragLeave”、事件、节点）；
}
}

此模板也不起作用：

template: `<p-tree [value]="files" 
                selectionMode="multiple" 
                [(selection)]="selectedFiles" 
                (onNodeSelect)="nodeSelect($event)"
                draggableNodes="true"
                droppableNodes="true"
        pDraggable="treedragdrop"
        pDroppable="treedragdrop"
        (onDragStart)="onDragStart($event, node)"
        (onDragEnd)="onDragEnd($event, node)"
        (onDrop)="onDrop($event, node)"
        (onDragEnter)="onDragEnter($event, node)"
        (onDragLeave)="onDragLeave($event, node)"
                [contextMenu]="cm">

            </p-tree>

            <p-contextMenu #cm [model]="cmItems"></p-contextMenu>               
`,

模板：`
`,

请检查您的标签。。。其中一个是错误的（提示：标题中没有的那个），我发现（onNodeDrop）=“onNodeDrop（$event，dragNode，dropNode）”同时返回目标节点和被拖动的节点，其中还包括它以前的父节点，所以实际上我能够实现所需的功能。但是，这是正确的吗？我仍然认为将所有这些事件。。。