Angular 4の画像にクリックイベントを追加します

Question

angularコンポーネントの画像にクリックイベントを追加する必要があります。試してみました：

<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>

どうすればこれを取得できますか？

Answer 1

同様の問題がありました。 FirefoxとInternet Explorerでは機能しますが、Chromeでは機能しません。クロムの場合、ボタン内のすべての要素がクリックに応答する必要がある場合は、これを追加します。

button > * {
    pointer-events: none;
}

それ以外の場合は、必要に応じて要素を選択して追加します。

css-tricksからの元の回答

Answer 2

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';
    }
}