クリックイベントを持つカードコンポーネント内のブートストラップ4ボタン

Question

ブートストラップ4を使用して基本カードを生成するには、次のHTMLコードがあります。 カードをクリックしたときにカードのスタイルを変更します。しかし、ボタンがクリックされた場合は、スタイルを変更する必要はありません。 現時点では、test1ボタンをクリックすると、onCardClick（）関数も有効になります。 私はテストボタン1のみのTest1（）をクリックすると、このように操作を行うための方法がありますが実行

<div class="container"> 
    <div class="row"> 
    <div class="col-md-4"> 
    <div class="card" (click)="onCardClick()"> 
     <div class="card-block"> 
     <h4 class="card-title d-inline">Some Title</h4> 
     <button class="btn btn-primary" (click)="onTest1()">test1</button> 
     <button class="btn btn-primary" (click)="onTest2()">test2</button> 
     </div> 
    </div> 
</div> 

Answer 1

あなたは、DOMバブルアップからのイベントを停止するには、これを試みることができる

：

<div class="container"> 
    <div class="row"> 
    <div class="col-md-4"> 
     <div class="card" 
      (click)="onCardClick()"> 
     <div class="card-block"> 
      <h4 class="card-title d-inline">Some Title</h4> 
      <button class="btn btn-primary" 
        (click)="onTest1($event)">test1 
      </button> 
      <button class="btn btn-primary" 
        (click)="onTest2($event)">test2 
      </button> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

をあなたのコンポーネント：

import {Component} from "@angular/core" 

@Component({ 
    selector: 'test', 
}) 

export class Test 
{ 
    onTest1(event) 
    { 
     event.stopPropagation(); 
     //or event.preventDefault() 
     //stuff to run 
    } 

    onTest2(event) 
    { 
     event.stopPropagation(); 
     //stuff to run 
    } 

}