div内のボタンをクリックした場合はdivを無視する

Question

divを最小化するボタンを含むdivがあります。 div内の他の場所をクリックすると、divの詳細がロードされます。しかし、divを最小化すると詳細をロードしたくありません。ここに私のコードはあります：

<div (click)="showDetails(key)" *ngFor="let key of keys"> 
    <button (click)="minimize(key)">Minimize</button> 
    <span>The rest of the content is here</span> 
</div> 

私はshowDetailsを無視したいと思います。

Answer 1

私は今それをテストすることはできないんだけど、何を試みることができることはあなたの構成要素で

(click)="minimize(key, $event)" 

ある

minimize(key, event) { 
    event.preventDefault(); 
    event.stopPropagation(); 
} 

それらのいずれかで試してみて、それがどのようになる参照してください！

<div (click)="showDetails(key)" *ngFor="let key of keys"> 
    <button (click)="minimize(key,$event)">Minimize</button> 
    <span>The rest of the content is here</span> 
</div> 

TSコード：

minimize(key,event){ 
     event.stopPropagation(); 
} 

Answer 2

はstopPropagation()

htmlコードを使用して、イベントの伝播を停止することにより、親クリックイベントを無視することですevent.stopPropagation（） クリックイベントがDOMをバブリングしないようにします。

Answer 3

使用あなたは何をすべきか