仅当主机上存在特定类时，Angular Renderer2 setStyle答案

【问题标题】：Angular Renderer2 setStyle only if specific class present on host仅当主机上存在特定类时，Angular Renderer2 setStyle
【发布时间】：2019-01-25 08:29:39
【问题描述】：

我有一个（微调器）指令，可以使用@HostBinding 添加/删除一个类（.spinner）。它还会在激活时添加/删除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 存在某个类时，是否可以在主机上应用样式？

这显然行不通：

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

【问题讨论】：

能否提供例如stackblitz.com中的代码？
我使用指令 stackblitz.com/edit/so-spinner 创建了一个代码示例 - 请参阅 spinner directive 关于添加和删除微调器类，参阅 app component 了解如何使用它。
@Chybie，感谢您的回复，但我不是在问如何添加/删除课程。

标签： angular angular-directive angular-renderer2 angular-renderer

【解决方案1】：

使用 can ElementRef 检查元素中是否存在类

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

【讨论】：