Angular 中不允许使用指令类样式？

Question

我有一个指令，将鼠标悬停在该元素上会在该元素上添加一个覆盖层。现在，动态添加的元素中的每个类都有 5 到 8 个属性，因此我不想使用 Renderer2 在元素上执行添加主机绑定或 setStyle 之类的操作。我已经在将发生指令的组件中添加了类，但它仍然没有应用类属性。

** 问题：我不想在指令上执行 HostBinding 或 setStyle（就好像我需要更改任何属性一样，我必须在 .ts 文件上更改此属性，并且我希望将 CSS 和 Typescript 代码分开）并且我也不想不想在每个组件 .css 文件中添加指令中使用的类，因为需要进行大量复制和粘贴操作，此悬停应该起作用，我只想在元素上添加像 appHoverEdit 这样的指令，而不需要在每个组件中添加 css 类。是否有类似 styleURL 属性，我可以将其添加到指令本身（我已经看到了使用主机的另一篇文章）。 **

我可以将类添加到主 .css 文件 styles.css 并且这些类正在生效，但我想将类添加到该特定指令而不是整个应用程序。 如果有更好的解决方案，请告诉我，如果我犯了错误。

指令在下面

import { Directive, ElementRef, HostListener, OnInit, Renderer2 } from '@angular/core';

@Directive({
  selector: '[appHoverEdit]'
})
export class HoverEditDirective implements OnInit {
  edit = this.renderer.createElement('div');
  
  @HostListener('mouseenter') onmouseover(event: Event){
    this.renderer.appendChild(this.element.nativeElement, this.edit)
  }
  @HostListener('mouseleave') onnmouseleave(event:Event){
    this.renderer.removeChild(this.element.nativeElement, this.edit, false)
  }

  constructor(private element: ElementRef,
    private renderer: Renderer2
  ) {}
    
  ngOnInit(){
    this.edit.innerHTML = `
      <div class="edit-schedule flex">
        <div class="h2">Edit</div>
        <div class="i-edit-container">
          <svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M22 36.6667H38.5M5.5 36.6667H8.57C9.46683 36.6667 9.91524 36.6667 10.3372 36.5654C10.7114 36.4755 11.069 36.3274 11.3971 36.1264C11.7671 35.8996 12.0842 35.5825 12.7184 34.9484L35.75 11.9167C37.2688 10.3979 37.2688 7.93546 35.75 6.41667C34.2313 4.89789 31.7688 4.89789 30.25 6.41667L7.21831 29.4484C6.58415 30.0825 6.26707 30.3996 6.04032 30.7696C5.83928 31.0977 5.69113 31.4554 5.60131 31.8295C5.5 32.2515 5.5 32.6999 5.5 33.5967V36.6667Z" stroke="black" stroke-width="3.66667" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
      </div>`;
  }
}

Answer 1

是的，有两种方法，选择你最喜欢的。

1. 将样式标签添加到编辑的 DOM 中，以便它们获得样式！

代码：

import {
  Directive,
  ElementRef,
  HostListener,
  OnInit,
  Renderer2,
} from '@angular/core';

@Directive({
  selector: '[appHoverEdit]',
  standalone: true,
})
export class HoverEditDirective implements OnInit {
  edit = this.renderer.createElement('div');

  @HostListener('mouseenter') onmouseover(event: Event) {
    this.renderer.appendChild(this.element.nativeElement, this.edit);
  }
  @HostListener('mouseleave') onnmouseleave(event: Event) {
    this.renderer.removeChild(this.element.nativeElement, this.edit, false);
  }

  constructor(private element: ElementRef, private renderer: Renderer2) {}

  ngOnInit() {
    this.edit.innerHTML = `
      <style>
      .edit-schedule > .h2 {
        color: red !important;
      }
      .edit-schedule > .i-edit-container > svg {
        fill: red !important;
      }
      </style>
      <div class="edit-schedule flex">
        <div class="h2">Edit</div>
        <div class="i-edit-container">
          <svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M22 36.6667H38.5M5.5 36.6667H8.57C9.46683 36.6667 9.91524 36.6667 10.3372 36.5654C10.7114 36.4755 11.069 36.3274 11.3971 36.1264C11.7671 35.8996 12.0842 35.5825 12.7184 34.9484L35.75 11.9167C37.2688 10.3979 37.2688 7.93546 35.75 6.41667C34.2313 4.89789 31.7688 4.89789 30.25 6.41667L7.21831 29.4484C6.58415 30.0825 6.26707 30.3996 6.04032 30.7696C5.83928 31.0977 5.69113 31.4554 5.60131 31.8295C5.5 32.2515 5.5 32.6999 5.5 33.5967V36.6667Z" stroke="black" stroke-width="3.66667" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
        </div>
      </div>`;
  }

}

Stackblitz 演示

2. 将样式放入global-styles.css中，并根据父类有条件地应用它们

全局样式.scss

.edit-schedule > .h2 {
  color: red !important;
}
.edit-schedule > .i-edit-container > svg {
  fill: red !important;
}

Stackblitz 演示