在Angular 2发布版本中重新渲染特定组件

问题描述：

我有两个组件：BuilderComponent和InputTextComponent。通过拖放操作，我在BuilderComponent模板的sortableList元素中放置了一个指令。与检查人员，我可以看到该指令出现在sortablelist DOM元素：在Angular 2发布版本中重新渲染特定组件

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

任何想法？

在此先感谢。

答

如果拖放解决方案是基于HTML5，也许你可以从“@角/核心”使用HostListener装饰的破解您的拖放交换逻辑：

添加这样的事情上你拖放区域组成：

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

而且这样的事情你可拖动组件上：

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

HostListeners为您提供的方式来实现常规听众˚F或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

在Angular 2发布版本中重新渲染特定组件

相关推荐