Angular 11 指令如何动态更改从 scss 变量读取的颜色代码答案

【问题标题】：Angular 11 directive how to dynamically change colour code reading from scss variableAngular 11 指令如何动态更改从 scss 变量读取的颜色代码
【发布时间】：2021-07-27 20:53:43
【问题描述】：

我在 Angular 11 中创建了以下拖放指令。在拖动文件时，我有不同的颜色，而在拖动时，我有不同的颜色。我不想硬编码颜色代码，而是从 scss 文件中读取，例如： colours.scss。任何人都可以帮助如何做到这一点？

import { Directive, EventEmitter, Output, HostListener, HostBinding } from '@angular/core';

@Directive({
  selector: '[appDragDropFileUpload]'
})

export class DragDropFileUploadDirective {

    @Output() fileDropped = new EventEmitter<any>();
  
    @HostBinding('style.background-color') private background = '#ffffff';
  
    // Dragover Event
    @HostListener('dragover', ['$event']) dragOver(event): void {
      event.preventDefault();
      event.stopPropagation();
      this.background = '#e2eefd';
    }
  
    // Dragleave Event
    @HostListener('dragleave', ['$event']) public dragLeave(event): void {
      event.preventDefault();
      event.stopPropagation();
      this.background = '#ffffff';
    }
  
    // Drop Event
    @HostListener('drop', ['$event']) public drop(event): void {
      event.preventDefault();
      event.stopPropagation();
      this.background = '#ffffff';
      const files = event.dataTransfer.files;
      if (files.length > 0) {
        this.fileDropped.emit(files);
      }
    }
  
  }

谢谢

【问题讨论】：

标签： sass angular11

【解决方案1】：

我设法通过在 angular 指令中添加基于布尔 getter 的类名来使其工作。

setBackgroundColor = false;

@HostBinding('class.highlight-drop') get backgroundColor() {
  return this.setBackgroundColor;
}

// Dragover Event
@HostListener('dragover', ['$event']) dragOver(event): void {
  event.preventDefault();
  event.stopPropagation();
  this.setBackgroundColor = true;
  //this.background = '#e2eefd';
}

// Dragleave Event
@HostListener('dragleave', ['$event']) public dragLeave(event): void {
  event.preventDefault();
  event.stopPropagation();
  this.setBackgroundColor = false
}

【讨论】：