Angular 2动态添加样式到主机答案

【问题标题】：Angular 2 Dynamic add style to hostAngular 2动态添加样式到主机
【发布时间】：2017-05-02 07:33:02
【问题描述】：

我想有条件地在宿主元素上添加样式。例如

:host, :host:focus {
    cursor: pointer;
}

:host .disabled {
    opacity: 0.5;
    cursor: default;
}

我启用了一个输入参数@Input()：布尔值

附：像<div [class.disabled]="!enabled"> </div> 一样包装我的组件还不够。

我想禁用/启用宿主元素。

【问题讨论】：

disabled 只能作用于特定元素，例如select、input、button
嗯，禁用是我的自定义 css 样式。我可以重命名它，但它应该可以工作。目前我不知道如何有条件地在主机上添加我的自定义 css 类
能否分享更多HTML代码

标签： css angular typescript directive styling

【解决方案1】：

您可以将ElementRef 与Renderer 一起使用：

@Component({
  ...
})
class YouComponent implements OnChanges {
  constructor(private el: ElementRef, private renderer: Renderer) {}

  ngOnChanges(changes: SimpleChanges) {
    if (changes.hasOwnProperty('enabled')) {
      this.renderer.setElementClass(this.el.nativeElement, 'disabled', {isAdd: !!changes['input'].currentValue});
    }
  }
}

【讨论】：