请教老师，我的onDragEnter方法里的dragData总是null，不知是什么原因

Question

@Directive({

    selector: '[appDroppable][dropTags][dragEnterClass]'

})

export class DropDirective {

@Output() dropped = new EventEmitter<DragData>();

@Input() dragEnterClass: string;

@Input() dropTags: string[] = [];

private data$;

constructor(

    private el: ElementRef,

    private rd: Renderer2,

    private service: DragDropService

) {

    // console.log('this.service.getDragData(): ', this.service.getDragData().take(1));

    

    this.data$ = this.service.getDragData().take(1);

}

@HostListener('dragenter', ['$event'])

onDragEnter(ev: Event) {

    ev.preventDefault();

    ev.stopPropagation();

    if (this.el.nativeElement === ev.target) {

        this.data$.subscribe(dragData => {

            console.log(dragData); // print: null

            if (this.dropTags.indexOf(dragData.tag) > -1) {

                this.rd.addClass(this.el.nativeElement, this.dragEnterClass);

            }

        });

    }

}

github: https://github.com/LeMueller/angular_task_manager

Answer 1

接灰的电子产品 2018-08-14 19:22:37

你的 drag 指令定义的 selector 中没有 dragdata 啊，所以无法设置

@Directive({    
selector: '[appDraggable][dragTag][draggedClass][dragData]',    
})

• 提问者 木讷25 #1

  老师，我在drag指令里是有[dragData]的。这里说的dragData是指drop指令里的 this.data$.subscribe(dragData => {}) 里面subscribe中的 dragData值，一直是null。

• 接灰的电子产品 回复 提问者 木讷25 #2

  你的 github 我看的时候是没有的，看一下我的 github 源码对比一下吧
  https://github.com/wpcfan/taskmgr