从菜单中拖动，将鼠标事件传递给组件

Question

请给我一些帮助。我想做什么？我想将组件从菜单拖动到网格。无缝地。 到目前为止我做了什么。 当我开始拖动服务时，我有了菜单组件，该菜单会导致保持网格的组件知道必须创建一个新的动态组件。这正在工作。

我不知道如何将鼠标拖动事件传递给新组件。这样您就可以拖动新组件？现在，该组件已创建，但拖动仍保留在单击的链接上。

服务代码：

 @Injectable()
export class DragDropService {
dragSubject = new Subject(); 
draggedItem: any;

constructor() { }

public setItemDraged(item: any,event:any): void {

   this.draggedItem = {}; 
   this.draggedItem.item = item;
   this.draggedItem.event = event;
   this.dragSubject.next(this.draggedItem);

 }

原件

onDrag(menuItem,event) {

    this.dragDropService.setItemDraged(menuItem,event);
}

目的地组件

 ..
 this.dragDropService.dragSubject.subscribe(value => {
        this.createComponent(value);
    });
 ..
 createComponent(item) {
    switch (item.event.which) {
        case 1:
            // left mouse button
            break;
        case 2:
        case 3:
            // right or middle mouse button
            return;
    }

    const factory = this.resolver.resolveComponentFactory(ArticlesComponent);
    const componentRef = this.entry.createComponent(factory);

    let new_event  = new MouseEvent(item.event.type, item.event);
    item.event.preventDefault();
    componentRef.instance.headChild.nativeElement.click(new_event);         
}