Добавьте CSS, если у хоста есть (нажмите)

Question

Я создаю библиотеку, и у меня есть компонент <my-card>. Это компонент, который часто имеет обработчик (click).

Я хочу добавить cursor: pointer автоматически, когда к компоненту прикреплен (click).

Так, например, <my-card> будет иметь курсор по умолчанию, а <my-card (click)="onClick()> применит cursor: pointer к элементу компонента.

Любой чистый способ сделать это?

Answer 1

Способ Angular сделать это - использовать директиву, взгляните на этот пример:

import { HostBinding, Directive } from '@angular/core'
@Directive({
   selector: '[myClick]'
})
class MyClickDirective {
  @HostBinding('class.mousepointer') private isClick: boolean;

  constructor(private el: ElementRef,
              private renderer: Renderer) {
  }

  @HostListener('click') onMyElemClicked() {
    this.isClick =!this.isClick;
  }
}

Я не тестировал этот пример, но это способ, которым вы должны исследовать.

Answer 2

Если вы можете изменить (click) на click, вы можете сделать это, используя CSS.

HTML:

<my-card>Look at me</my-card>
<my-card click="onClick()">Click me</my-card>

CSS:

my-card {
    border-radius: 3px;
    display: inline-block;
    padding: 5px;
}
[click] {
    background-color: red;
    color: white;
    cursor: pointer;
}

Часть [click] в CSS ссылается на атрибут элемента. Таким образом, это будет нацелено на любой элемент, который вы используете с атрибутом click. Если вы хотите настроить таргетинг только на любой элемент <my-card> с атрибутом click, вы должны изменить свой CSS на my-card[click].

Вот скрипка, на которую вы можете ссылаться: https://jsfiddle.net/8w9Lqxr4/1/