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

Angular2如何在拖动时改变背景颜色下降

1 个答案: