当前位置：文江博客话题详情

如何在 Angular 按钮上设置带有 onMouseOut 绑定的图像

发布于 2025-01-10 20:16:21 字数 676 浏览 0 评论 0原文

我需要 Angular 中的一个按钮。对于这个按钮，我将通过绑定设置一个图像（图标）。悬停时图像应该改变。在 onMouseOut 事件中，它应该设置回绑定的图像。

使用事件 onMouseOut 我收到错误

NG8002：无法绑定到“onMouseOut”，因为它不是“输入”的已知属性。

我尝试了

< ;button ..>

并始终得到相同的错误。

如何将 onMouseOut 与角度按钮绑定一起使用。

<input type="image" onclick="onUp()" 
src="/assets/icons/{{imgUp}}.png" 
onMouseOver="this.src='/assets/icons/up-hover.png'" 
onMouseOut="this.src='/assets/icons/{{imgUp}}.png'" />

原文

I need a button in Angular. For this button I will set a image (icon) by binding. On hover the image should change. On event onMouseOut it should set back to the binded image.

Using the event onMouseOut I get the error

NG8002: Can't bind to 'onMouseOut' since it isn't a known property of 'input'.

I tried

<button src='...
<button ..><img ...
<input type="image" ...

and get allways the same error.

How can I use the onMouseOut with binding on a angular button.

<input type="image" onclick="onUp()" 
src="/assets/icons/{{imgUp}}.png" 
onMouseOver="this.src='/assets/icons/up-hover.png'" 
onMouseOut="this.src='/assets/icons/{{imgUp}}.png'" />

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

Hello爱情风 2025-01-17 20:16:21

创建一个元素引用，就像我在下面创建的 imgElem 一样并使用它。

<input
  #imgElem
  type="image"
  onclick="onUp()"
  src="/assets/icons/{{ imgUp }}.png"
  (mouseenter)="imgElem.src = '/assets/icons/up-hover.png'"
  (mouseleave)="imgElem.src = '/assets/icons/{{imgUp}}.png'"
/>

Create a element reference like i have created imgElem below and use it.

<input
  #imgElem
  type="image"
  onclick="onUp()"
  src="/assets/icons/{{ imgUp }}.png"
  (mouseenter)="imgElem.src = '/assets/icons/up-hover.png'"
  (mouseleave)="imgElem.src = '/assets/icons/{{imgUp}}.png'"
/>

回复收藏 0 原文

孤凫 2025-01-17 20:16:21

我的解决方案是始终使用 Typescript 设置图像：

<input type="image" [src]="imgPathUp" (click)="onUp()" 
(mouseenter)="onUpHover()"  (mouseleave)="onUpLeave()" />

  imgUpNeutral = '/assets/icons/up.png';
  imgUpHover = '/assets/icons/up-hover.png';
  imgUpActive = '/assets/icons/up-active.png';
  imgPathUp = this.imgUpNeutral;
  currentImgUp = this.imgPathUp;
  
  
  public onUpHover(): void {
    this.imgPathUp = this.imgUpHover;
  }

  public onUpLeave(): void {
    this.imgPathUp = this.currentImgUp;
  }
  
  public onUp(): void {
    if (this.vote === VoteEnum.neutral) { // use the logic you need
      this.vote = VoteEnum.up;
      this.imgPathUp = this.imgUpActive;
    } else {
      this.vote = VoteEnum.neutral;
      this.imgPathUp = this.imgUpNeutral;
    };
    this.currentImgUp = this.imgPathUp;
  }

My solution is setting the image allways with Typescript:

<input type="image" [src]="imgPathUp" (click)="onUp()" 
(mouseenter)="onUpHover()"  (mouseleave)="onUpLeave()" />

  imgUpNeutral = '/assets/icons/up.png';
  imgUpHover = '/assets/icons/up-hover.png';
  imgUpActive = '/assets/icons/up-active.png';
  imgPathUp = this.imgUpNeutral;
  currentImgUp = this.imgPathUp;
  
  
  public onUpHover(): void {
    this.imgPathUp = this.imgUpHover;
  }

  public onUpLeave(): void {
    this.imgPathUp = this.currentImgUp;
  }
  
  public onUp(): void {
    if (this.vote === VoteEnum.neutral) { // use the logic you need
      this.vote = VoteEnum.up;
      this.imgPathUp = this.imgUpActive;
    } else {
      this.vote = VoteEnum.neutral;
      this.imgPathUp = this.imgUpNeutral;
    };
    this.currentImgUp = this.imgPathUp;
  }

回复收藏 0 原文

~没有更多了~