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

【问题标题】：Angular2 how to change background color when drag & dropAngular2如何在拖放时更改背景颜色
【发布时间】：2017-06-05 05:19:06
【问题描述】：

我有一个用 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？

【问题讨论】：

标签： css angular typescript drag-and-drop angular2-hostbinding

【解决方案1】：

您可以在标签中简单地指定 [ngStyle]，如下所示。

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

let backColor:string="transparent";

在您的放置事件中设置上述变量值并如下使用。

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

(2) 从像

这样的组件返回样式

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

【讨论】：