Question

我有两个组件：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。

BuilderComponent：

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  {}

InputTextComponent：

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

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

有什么想法吗？

提前致谢。

Answer 1

如果你的拖放式解决方案是基于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关于drag'n'drop的主题启发的功能代码：

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

在Angular 2发行版中重新呈现特定组件

1 个答案: