0

我有两个组件：BuilderComponent 和 InputTextComponent。通过拖放，我在 BuilderComponent 模板的 sortableList 元素中放置了一个指令。通过检查器，我可以看到指令出现在 sortablelist DOM 元素中：

<div class="row">
<div class="col-md-12">
  <ul id="sortableList">
      <zbjfb-input-text></zbjfb-input-text>
  </ul>
</div>

如何强制 BuilderComponent 检测自上次编译后模板的内容发生了变化，然后使用新添加的指令重新渲染模板，以便我可以看到新编译的 InputTextComponent。

构建器组件：

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

@Component({
  selector: 'zbjfb-builder',
  template: '
  <div class="row">
    <div class="col-md-12">
      <ul id="sortableList">

      </ul>
    </div>
  </div>
  '

})
export class BuilderComponent  {}

输入文本组件：

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

@Component({
  selector: 'zbjfb-input-text',
  templateUrl: './input-text.component.html',
  styleUrls: ['./input-text.component.css']
})
export class InputTextComponent {}

任何想法？

提前致谢。

4

1 回答 1

0

如果您的拖放解决方案是基于 HTML5 的，也许您可​​以使用来自 '@angular/core' 的 HostListener 装饰器来破解您的拖放交换逻辑：

在放置区域组件上添加类似这样的内容：

@HostListener('drop', ['$event']) 
onDrop(event: any) {
    //do something             
}

在您的可拖动组件上是这样的：

@HostListener('dragstart', ['$event']) 
onDrag(event: any) {
    //do something
}

HostListeners 为您提供了为 onmousedown、onkeyup、ondrop、ondrag 等元素事件实现常规侦听器的方法。

然后考虑一些逻辑来识别正在拖放的内容并更改拖动区域组件模型。这是我受 W3Schools 关于拖放主题的启发而制作的一些功能代码：

import { Component, HostListener, Input } from '@angular/core';

// The draggable component
@Component({
    selector: 'dragme',
    template: `
        <div draggable="true">
            Drag {{name}}!
        </div>
    `,
    styles: [`
        [draggable] {
            -moz-user-select: none;
            -khtml-user-select: none;
            -webkit-user-select: none;
            user-select: none;
            -khtml-user-drag: element;
            -webkit-user-drag: element;
            background-color: #AAA; 
            border: 1px solid black; 
            padding: 24px;
            margin: 12px;
        }
    `]
})
export class DragMe {

    @Input()
    name:string = "";

    @HostListener('dragstart', ['$event'])
    onDrag(event:any){        
        event.dataTransfer.setData("name",this.name);
    }
}

// The drop area component
@Component({
    selector: 'drop',
    template: `
        <div class="drop">
            Drop over me!
            <ul>
                <li *ngFor="let i of items">{{i}}</li>
            </ul>
        </div>
    `,
    styles: [`
        .drop{
            border: 1px solid black;
            padding: 24px;
        }
    `]
})
export class DropOverMe {

    items:string[] = [];

    @HostListener('dragover', ['$event'])
    onDragover(event:any){
        event.preventDefault();
    }

    @HostListener('drop', ['$event'])
    onDrop(event:any){
        event.preventDefault();        
        var name = event.dataTransfer.getData("name");                        
        this.items.push(name);
    }
}

// The functional example
@Component({
    selector: "drag-example",
    template: `
        <dragme name="Bob"></dragme>
        <dragme name="Alice"></dragme>
        <dragme name="Carl"></dragme>

        <drop></drop>
    `

})
export class DragExample{

}

完整代码在：https ://github.com/rafaelodon/angular2-html5-dragndrop-example

于 2016-09-21T21:45:52.990 回答