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

Question

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

打字稿：

@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) 从组件返回样式，如

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