Angular Renderer2 setStyle 仅当主机上存在特定 class 时

Question

我有一个 (spinner) 指令可以 add/remove 一个 class (.spinner) 使用 @HostBinding。激活时它还会 adds/removes 和 img (spinner.gif)。

如果主机上存在 .spinner，则会应用 scss 文件中定义的一堆样式：

.spinning {
  position: relative;
 }

.spinning img {
  display: block;
  width: 24px;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%)
 }

我想在我的指令中将这些样式应用到主机上。是否可以仅在使用 Renderer2 和 ElementRef 存在特定 class 时在主机上应用样式？

这显然行不通：

this.renderer.setStyle(this.el.nativeElement, '.spinning position', 'relative');

Answer 1

使用 ElementRef 可以检查元素中是否存在 class

ngOnInit(){
  let present = this.ele.nativeElement.classList.contains('open');
  if(present){
  //Then add your style
   this.renderer2.setStyle(this.el.nativeElement,'color','red');  

  }
  }

示例：https://stackblitz.com/edit/angular-renderer2-dispatch-event-f4j56o

Angular Renderer2 setStyle 仅当主机上存在特定 class 时

Angular Renderer2 setStyle only if specific class present on host

angular-directive

angular

angular-renderer

angular-renderer2