Question

我正在Angular 6中开发拖放应用程序，并且在拖放操作中，我正在动态创建新的HTML元素（例如'DIV'，'textarea'等元素）并分配样式，属性，默认x和通过使用应用程序的ElementRef和Renderer2功能并将新创建的HTML元素添加到正在执行放置操作的父元素中，y对其进行协调。

我还创建了一个angular指令，该指令将可拖动行为附加到新创建的HTML元素上，以便用户可以将其移动到父元素上的任何位置。指令的部分代码如下：

@Directive({
  selector: '[appMovable]'
})
export class MovableDirective {

  @HostBinding('style.transform') get transform(): SafeStyle {
    return this.sanitizer.bypassSecurityTrustStyle(
      `translateX(${this.position.x}px) translateY(${this.position.y}px)`);
  }
  private position = {x: 100, y: 0};

  constructor(private sanitizer: DomSanitizer) {
  }

  @HostListener('dragStart') onDragStart() {
    console.log('drag start');
    // Code to calculate the start position of the control being dragged....
  }

  @HostListener('dragMove') onDragMove() {
    console.log('drag move');
    // Code to calculate the current position of the control while it is being dragged....
  }

  @HostListener('dragEnd') onDragEnd() {
    console.log('drag end');
    // Code to calculate the end position of the control being dragged and the the position of the control properly.....
  }
}

虽然我可以为新创建的元素分配样式，属性以及默认的x和y坐标，但是我无法将'appMovable'指令绑定到新创建的HTML元素。创建HTML元素并为其分配不同属性的代码如下：

@Directive({
  selector: '[appDroppable]'
})
export class DroppableDirective {

  constructor(private elementRef: ElementRef, private renderer: Renderer2) { 
}

  @HostListener('dragover', ['$event'])
  public onDragOver(evt) {
    evt.preventDefault();
    evt.stopPropagation();
  }

  @HostListener('dragleave', ['$event'])
  public onDragLeave(evt) {
    evt.preventDefault();
    evt.stopPropagation();
  }

  @HostListener('drop', ['$event'])
  public onDrop(evt) {
    evt.preventDefault();
    evt.stopPropagation();

    // Since text element is being dragged so create new textarea html control
    const textareaElement = this.renderer.createElement('textarea');
    this.renderer.setAttribute(textareaElement, 'placeholder', 'click to add content...');
    this.renderer.setAttribute(textareaElement, 'class', 'proInput editing');
    this.renderer.setAttribute(textareaElement, 'draggable', 'true');

    //Assign the appMovable directive to element
    this.renderer.setAttribute(textareaElement, 'appMovable', '');

    // this.renderer.appendChild(newDivElement, textareaElement);
    this.renderer.appendChild(this.elementRef.nativeElement, textareaElement);
  }
}

当我在浏览器调试器工具中检查新创建的HTML元素时，可以看到appMovable指令已分配给HTML元素，但是该元素的行为不符合分配给它的指令。

是否还需要做其他事情，或者还有其他选择来使指令与动态创建的HTML元素一起正常工作？

如何通过使用ElementRef和Renderer2将角度指令分配给html元素？

0 个答案: