Angular2ドラッグ＆ドロップで背景色を変更する方法

Question

ドラッグ＆ドロップのコンテナに角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：私は疲れて背景色を変更するHostBindingを使用するが、それは動作しません

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

。ドラッグ状態を検出してCSSを変更するにはどうすればよいですか？

Answer 1

あなたのタグに[ngStyle]と指定するだけです

のようなバックの色のためのコンポーネント内の1つの変数を定義します。あなたのドロップイベントで変数値以上に設定してください

let backColor:string="transparent"; 

と以下のように使用します。

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

様成分から[ngStyle]

様（2）リターンスタイルの

（1）インラインCSS