javascript - 如何更改 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>