在Angular 4中将点击事件添加到图像答案

【问题标题】：Add click event to image in Angular 4在Angular 4中将点击事件添加到图像
【发布时间】：2020-12-26 23:58:30
【问题描述】：

我需要在角度组件中为图像添加一个点击事件。我试过了：

<img src="../../assets/add.svg" width="18" height="18" (click)="addItem()">

但这不起作用。如果像这样将图像放在按钮内：

<button type="button" class="btn_img" (click)="addItem()">
  <img src="../../assets/add.svg" width="18" height="18"> 
 </button>

它看起来像一个带有图像的按钮，我不想要这个，我希望它看起来像：

<img src="../../assets/add.svg" width="18" height="18">

但它的工作原理是：

<button type="button" class="btn_img" (click)="addItem()">
  <img src="../../assets/add.svg" width="18" height="18"> 
 </button>

我怎么能得到这个，你如何在角度做到这一点？

【问题讨论】：

您是否尝试将图像包装在div 而不是button 中，看看是否有效？并且，将(click)="addItem()" 添加到div。类似的东西。有点猜测。
我的意思是，你可以使用 <input type="image">，但我不知道这会如何/是否会影响 Angular。
(click) 功能适用于图像。可能还有其他原因导致您的问题中未涵盖的问题，或者您在添加该按钮时未发现的 DOM 中的错误。在 img 上工作（点击）的工作证明：stackblitz.com/edit/github-hibfhb
当像 OP 一样将它放入并将放入
或时，它适用于我。也许方法写错了？这种情况经常发生在我身上。
如果解决了问题，有什么更新吗？

标签： html css angular

【解决方案1】：

您可以在这里看到一个工作示例，其中包含所有可能的方式：

https://stackblitz.com/edit/angular-kvsjre?file=src%2Fapp%2Fapp.component.html

如果你喜欢使用

包装器或锚点或图像

祝你好运

【讨论】：

【解决方案2】：

你可以这样点击即时图片

在您的视图中创建 img 和输入

<img [src]="image" alt="" class="image-exercise" (click)="selectFile.click()">
<input type="file" (change)="getImage($event)" style="display: none" #selectFile>

你的组件创建了保存图片的函数

getImage(ev) {
   console.log(ev.target.files[0]);
}

【讨论】：

【解决方案3】：

some.component.html

<div >
    <img [src]="ImagePath" (click)="ImageClick()"/>
</div>

some.component.ts

export class SomeComponent implements OnInit {
    ...
    ...
    ImagePath = 'path goes here';

    ImageClick() {
        this.ImagePath = 'updated path goes here';
    }
}

【讨论】：

【解决方案4】：

<img class="image" src="../../assets/add.svg" width="18" height="18" (click)="addItem()">

并将以下类添加到您的 css 文件中

.image {
   cursor: pointer;
}

【讨论】：

【解决方案5】：

我遇到了类似的问题。它适用于 Firefox 和 Internet Explorer，但不适用于 Chrome。对于 chrome，如果按钮内的所有元素都应该响应点击，请添加：

button > * {
    pointer-events: none;
}

否则根据需要添加到选择元素。

original answer from css-tricks

【讨论】：

嗯...也许最好把它写成评论（带有 CSS 技巧的链接）。但是作为一个新用户，我知道你还没有足够的积分。嗯嗯嗯嗯……