Angular 8 dnd upload指令在主机组件上创建叠加层

Question

我为上传文件做了一个非常简单的拖放Angular 8指令。现在，我希望图像出现在主机组件内的放置动作（例如叠加层）上，指示上载动作。我正在尝试使用@HostBinding和@ViewChild，ElementRef和Renderer2，但是没有任何结果。如果我使用嵌套组件，则无法使用。仅不透明度有效，更改背景颜色无效。该指令可以应用于任何组件，因此我首先不知道三个嵌套组件。我举了一个简单的例子，其中只有不透明度有效。.

https://stackblitz.com/edit/angular-159sn5?file=src%2Fapp%2Fdnd-directive.directive.ts

感谢您的回答，对我的英语不好，对不起...

Answer 1

我想我知道您正在尝试做的事情。我已经分叉了您的堆砌炸弹，并移动了一些东西。

https://stackblitz.com/edit/angular-fgmmbg

• [堆栈闪电战缺少对@ angular / cdk的引用，似乎您将要使用它，因为您有cdkdrag，所以我添加了]]
• DndDirectiveDirective附加到<app-component-a></app-component-a>中的the app.component.html，但是您正在向<div class="example-box">内的component-a.component.html应用样式，因此该指令所针对的elementRef是本身没有高度/宽度，因此不会显示背景。您可以将指令移至div内的component-a.component.html，然后将目标对准正确的元素
• 有很多方法可以将背景图像添加到元素中。一种简单的方法是将其添加到styles.css中，以便在整个应用程序中都可以访问它]

.dnd {
    background-image: url(***Path to image***)
}

然后在指令中]
  constructor(private renderer: Renderer2, private elementRef: ElementRef) { 
    this.renderer.addClass(elementRef.nativeElement, 'dnd');
  }