Angular2 Wie ändere ich die Hintergrundfarbe beim Drag & Drop?

Question

Ich habe einen Drag & Drop-Container in Angular 2 Typoskript geschrieben. Ich möchte die Hintergrundfarbe des Drag-& Drop-Containers ändern, während ich eine Datei in den Container ziehe.

Typoskript:

@HostListener('dragover', ['$event']) public onDragOver(evt){ 
evt.preventDefault(); 
evt.stopPropagation(); 
} 

@HostListener('dragleave', ['$event']) public onDragLeave(evt){ 
evt.preventDefault(); 
evt.stopPropagation(); 
} 

@HostListener('drop', ['$event']) public onDrop(evt){ 
evt.preventDefault(); 
evt.stopPropagation(); 
let files = evt.dataTransfer.files; 
let valid_files : Array<File> = []; 
let invalid_files : Array<File> = []; 
if(files.length > 0){ 
    forEach(files, (file: File) =>{ 
    let ext = file.name.split('.')[file.name.split('.').length - 1]; 
    if(this.allowed_extensions.lastIndexOf(ext) != -1){ 
     valid_files.push(file); 
    }else{ 
     invalid_files.push(file); 
    } 
    }); 
    this.filesChangeEmiter.emit(valid_files); 
    this.filesInvalidEmiter.emit(invalid_files); 
} 
} 

HTML:

<div class="dropzone" (filesChangeEmiter)="onFilesChange($event)" 
    (filesInvalidEmiter)="onFileInvalids($event)"> 
    <div class="centered">Drop your file here!</div> 
</div> 

ich müde HostBinding zu verwenden, um die Hintergrundfarbe zu ändern, aber es funktioniert nicht. Wie kann ich den Ziehstatus erkennen und das CSS ändern?

Answer 1

Sie können einfach [ngStyle] in Ihrem Tag wie folgt angeben.

Definieren Sie eine Variable in der Komponente für Hintergrundfarbe wie:

let backColor:string="transparent"; 

über Variablenwert in Ihrem Drop-Ereignisse einstellen und wie unten verwenden.

(1) Inline CSS mit [ngstyle] wie

(2) Return Stil von Komponente wie

private setStyles(): any { 
    let styles = { 
     'background-color': this.backColor 
    };  
    return styles; 
}