Angular 2动态添加样式到主机

Question

我想在主机元素上有条件地添加样式。 e.g

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

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

我启用了输入参数@Input（）：boolean

P.S。包裹我的组件，如<div [class.disabled]="!enabled"> </div> 还不够。

我想要禁用/启用主机元素。

Answer 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});
    }
  }
}