Angular 2 指令：意外调用方法或属性访问答案

【问题标题】：Angular 2 directive: Unexpected call to method or property accessAngular 2 指令：意外调用方法或属性访问
【发布时间】：2017-07-29 03:06:35
【问题描述】：

我正在关注this 示例以在 Angular 2 cli 项目上实现拖放功能。在 Chrome 上一切正常。虽然在 IE 11 上开始拖动元素时出现异常。

关于如何解决这个问题的任何建议？

【问题讨论】：

标签： angular internet-explorer drag-and-drop draggable angular2-directives

【解决方案1】：

这似乎是 Internet Explorer 的 known bug 由调用 dataTransfer.setData 而不是“文本”引起的。不幸的是，这个例子正是这样做的，但在 IE 中失败了。我实现了一种不同的方法——使用 Angular 服务来跟踪当前区域。这是更新后的Plunkr。

import { Injectable } from '@angular/core';

@Injectable()
export class DragService {
  private zone: string;

  startDrag(zone: string) {
    this.zone = zone;
  }

  accepts(zone: string): boolean {
    return zone == this.zone;
  }
}

可拖动

@Directive({
  selector: '[myDraggable]'
})
export class DraggableDirective {
  constructor(private dragService: DragService) {

  }

  @HostBinding('draggable')
  get draggable() {
    return true;
  }

  @Input()
  set myDraggable(options: DraggableOptions) {
    if (options) {
      this.options = options;
    }
  }

  private options: DraggableOptions = {};

  @HostListener('dragstart', ['$event'])
  onDragStart(event) {
    const { zone = 'zone', data = {} } = this.options;

    this.dragService.startDrag(zone);

    event.dataTransfer.setData('Text', JSON.stringify(data));
  }
}

放下目标

@Directive({
  selector: '[myDropTarget]'
})
export class DropTargetDirective {
  constructor(private dragService: DragService) {

  }

  @Input()
  set myDropTarget(options: DropTargetOptions) {
    if (options) {
      this.options = options;
    }
  }

  @Output('myDrop') drop = new EventEmitter();

  private options: DropTargetOptions = {};

  @HostListener('dragenter', ['$event'])
  @HostListener('dragover', ['$event'])
  onDragOver(event) {
    const { zone = 'zone' } = this.options;

    if (this.dragService.accepts(zone)) {
       event.preventDefault();
    }
  }

  @HostListener('drop', ['$event'])
  onDrop(event) {
    const data =  JSON.parse(event.dataTransfer.getData('Text'));

    this.drop.next(data);
  }
}

【讨论】：