Angular2如何在拖放时更改背景颜色

Question

我有一个用 Angular 2 typescript 编写的拖放容器。我想在将文件拖入容器时更改拖放容器的背景颜色。

打字稿：

@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>

我厌倦了使用 HostBinding 来更改背景颜色，但它不起作用。如何检测拖动状态并更改其 CSS?

Answer 1

您只需在您的代码中指定 [ngStyle]，如下所示。

在组件中为背景颜色定义一个变量，如：

let backColor:string="transparent";

在您的放置事件中设置上面的变量值并按如下方式使用。

(1) 内联 CSS 与 [ngStyle] 类似

(2) Return 组件的样式

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

Angular2如何在拖放时更改背景颜色

Angular2 how to change background color when drag & drop

css

drag-and-drop

typescript

angular2-hostbinding

angular