Question

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

@ViewChild('infobubble', { read: ElementRef }) infoBubbleElement: ElementRef;

  ngAfterViewInit(): void {
    const elem = this.infoBubbleElement.nativeElement;
    elem.style.backgroundColor = 'green';
  }

Answer 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>

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

1 个答案: