Как я могу изменить значок при наведении на Angular?

Question

У меня есть компонент angular, который я хочу сменить на хове. Вот разметка:

  <app-pill-cta-icon color="white" [name]="'Request an Appointment'" [text]="'Request an Appointment'" (mouseout)='[imgsrc]="'../assets/black-calendar.svg'"' (mouseover)='[imgsrc]="'../assets/white-calendar.svg'"'></app-pill-cta-icon>

из файла ts:

@Component({
  selector: "app-pill-cta-icon",
  // templateUrl: "./pill-cta-icon.component.html",
  template: `
    <a
      href="{{ url }}"
      type="button"
      class="pill-cta-icon {{ color }}-cta btn {{ modifiers }}"
      name="{{ name }}"
      aria-label="button"
      role="button"
    >
      <p class="btn-text">
        <span class="icons" *ngIf="imgsrc"
          ><img src="{{ imgsrc }}" width="24"/></span
        >{{ text }}
      </p>
    </a>
  `,
  styleUrls: ["./pill-cta-icon.component.scss"]
})

export class PillCtaIconComponent implements OnInit {
  @Input() url: string;
  @Input() name: string;
  @Input() text: string;
  @Input() color: string;
  @Input() imgsrc: string;
  @Input() modifiers: string;

  constructor() {}

  ngOnInit() {}
}

Но, похоже, это не работает. Я не могу сразу сказать, чего не хватает.

Answer 1

То, как вы это делаете, не поддерживается Angular. В компоненте, где вы используете компонент app-pill-cta-icon, я бы добавил параметр, в котором вы храните текущий URL-адрес изображения, в примере он имеет имя imageSource. Тогда вы можете сделать следующее:

<app-pill-cta-icon color="white" 
  [name]="'Request an Appointment'"
  [text]="'Request an Appointment'"
  [imgsrc]="imageSource"
  (mouseout)="imageSource = '../assets/black-calendar.svg'"
  (mouseover)="imageSource = '../assets/white-calendar.svg'">
</app-pill-cta-icon>