html - 卡片组件内的 Bootstrap 4 按钮具有单击事件

Question

我有以下 html 代码来使用 bootstrap 4 生成基本卡。 我想在单击卡片时更改卡片的样式。但是，如果单击该按钮，我不希望样式发生变化。 目前，当我单击 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
    }

}