Angular 2リリースの特定のコンポーネントを再レンダリングする

Question

私はBuilderComponentとInputTextComponentという2つのコンポーネントを持っています。 ドラッグアンドドロップを使用して、BuilderComponentテンプレートのsortableList要素にディレクティブを配置します。

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

がどのように私はテンプレートの内容は、最後のコンパイル以降に変更されたことを検出するBuilderComponentを強制することができ、その後再：インスペクタで、私はディレクティブはsortablelistのDOM要素に表示されて見ることができます新しい追加されたディレクティブでテンプレートをレンダリングするので、新しいコンパイルされた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ベースされている場合は、多分あなたはあなたのドラッグをハックと交換ロジックをドロップする「角度/コア@」からHostListenerデコレータを利用することができます：

あなたにこのような何かを追加します。あなたのドラッグ可能なコンポーネントの

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

そして、このような何か：エリアのコンポーネントをドロップ

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

HostListenersはあなたに、従来のリスナーFを実装する方法を提供onmousedown、onkeyup、ondrop、ondragのような要素イベントが含まれます。

次に、ドラッグ/ドロップされているものを特定するロジックを考え、ドラッグ領域コンポーネントモデルを変更します。 https://github.com/rafaelodon/angular2-html5-dragndrop-example

：で

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{ 

} 

全コード：ここで私はドラッグ＆ドロップでW3Schoolsのトピックに触発作った、いくつかの機能コードです