如何在 Angular 中使用 ElementRef 访问 ::after 伪选择器

Posted 2023-03-06

【中文标题】如何在 Angular 中使用 ElementRef 访问 ::after 伪选择器

【英文标题】：How to access the ::after pseudo selector using ElementRef in Angular

【发布时间】：2019-03-24 12:03:15

【问题描述】：

例如，怎么可能？访问并设置下面元素的 ::after 伪选择器的背景颜色？

@ViewChild('infobubble',  read: ElementRef ) infoBubbleElement: ElementRef;

  ngAfterViewInit(): void 
    const elem = this.infoBubbleElement.nativeElement;
    elem.style.backgroundColor = 'green';
  

【问题讨论】：

我不是角度专家，但你不能用 JS 访问伪元素，所以你不能用 angular 来做

伪元素不能被 JS/JQ 选择，因为它们不是 DOM 元素。使用类将是最佳的。 - ***.com/questions/5041494/…

检查这个：***.com/questions/5041494/… 它可以帮助你找到方法

【参考方案1】：

我遇到了同样的情况，无法从 elementRef 访问 ::before 或 ::after html 元素；我的解决方案是在我需要访问的 HTML 元素中创建另一个 DIV，用指令修改它并更改 div 的背景，这将是新的 :: before

我的指令示例：

@Directive(selector: '[appPrimaryColor]')

export class PrimaryColorDirective implements OnInit 

  @Input() backgroundColor = false;

  constructor(
    private elementRef: ElementRef,
    private _renderer: Renderer2,
  )  

  ngOnInit() 
    // Set BackgroundColor
    if (this.backgroundColor) 
      this._renderer.setStyle(this.elementRef.nativeElement, 'background-color', COLOR);
    
  

在 HTML 中：

<div class="icon">
  <!-- step-ok-effect is the new div-->
  <div
    appPrimaryColor
    [backgroundColor]="true"
    class="step-ok-effect"></div>
    <span class="icon- step.state ? 'check' : step.icon "></span>
  </div>
</div>