Angular：如果主机可单击，则更改主机样式

Question

如果组件上有(click)="..."属性，有没有办法改变宿主的样式？

类似这样的：

app.component.html

<my-example (click)="..."></my-component>

my-example.component.scss

:host {
 cursor: default;
}


/* If element has (click) attribute use this style */
:host-context([(click)]) {
 cursor:pointer;
}

Answer 1

您可以使用 @HostBinding 装饰器来做到这一点。

在您的 .ts 文件中，您需要将一些属性绑定到 style.cursor 属性并在需要时切换它。

类似这样的：

  @HostBinding('style.cursor') styleCursor: 'default' | 'pointer' = 'default';
    
  showAlert(event) {
     this.styleCursor = this.styleCursor === 'default' ? 'pointer' : 'default';
     ....
  }