html - Bootstrap 4 ღილაკი კარდ კომპონენტის შიგნით, რომელსაც აქვს კლიკის მოვლენა

მე მაქვს შემდეგი HTML კოდი იმისათვის, რომ შევქმნა ძირითადი ბარათი Bootstrap 4-ის გამოყენებით. მე მსურს ბარათის სტილის შეცვლა, როდესაც ბარათი დაიკლიკება. თუმცა, თუ ბატონი დაიკლიკება, მე არ მსურს სტილის შეცვლა. ამ მომენტში, როდესაც მე დავაკლიკებ test1 ბატონს, ფუნქცია onCardClick() ასევე აქტიურდება. არსებობს გზა, რომ ეს ისე მოხდეს, რომ როცა დავაკლიკებ მხოლოდ 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>

პასუხი #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
    }

}