Re-Rendern einer bestimmten Komponente in Angular 2 Release-Version

Question

Ich habe zwei Komponenten: BuilderComponent und InputTextComponent. Mit Drag & Drop lege ich eine Direktive in das sortableList-Element der BuilderComponent-Vorlage. Mit dem Inspektoren kann ich die Richtlinie sehe im sortablelist DOM-Elemente erscheint:

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

Wie kann ich die BuilderComponent zwingen, zu erkennen, dass der Inhalt der Vorlage geändert wird seit der letzten Kompilierung und dann re- Rendern Sie die Vorlage mit der neuen hinzugefügten Direktive, damit ich die neu kompilierte InputTextComponent sehen kann.

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

Jede Idee?

Vielen Dank im Voraus.

Answer 1

Wenn Ihr drag'n'drop Lösung HTML5 basiert, vielleicht können Sie nutzen HostListener Dekorateur von ‚@ Winkel/Kern‘ machen Sie Ihren Widerstand zu hacken und Tauschlogik fallen:

so etwas wie dieses Add auf Bereich Komponente fallen:

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

Und so etwas wie dieses auf Ihrer ziehbar Komponente:

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

HostListeners Sie Möglichkeiten bieten herkömmliche Hörer zu implementieren f oder Element Ereignisse wie onmousedown, onkeyup, ondrop, ondrag.

Dann denken Sie an eine Logik, um zu identifizieren, was gezogen/fallen gelassen wird, und ändern Sie das Ziehbereichskomponentenmodell. Hier einige funktionelle Code, den ich von W3Schools Thema auf drag'n'drop inspiriert gemacht haben:

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{ 

} 

Voll Code an: https://github.com/rafaelodon/angular2-html5-dragndrop-example