Question

我有以下简单的bootstrap手风琴。这是一个Angular 4应用程序。当前单击应触发手风琴切换的链接会在浏览器中触发不需要的导航事件。

<div id="accordion" role="tablist" aria-multiselectable="true">
        <div class="card">
            <div class="card-header" role="tab" id="headingOne">
                <h5 class="mb-0">
                    <a data-toggle="collapse" data-target="#collapseOne" data-parent="#accordion" aria-expanded="true" href="#collapseOne" aria-controls="collapseOne">
                        Active Partners
                    </a>
                </h5>
            </div>
            <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
                <div class="card-block">
                </div>
            </div>
        </div>
        <div class="card">
            <div class="card-header" role="tab" id="headingTwo">
                <h5 class="mb-0">
                    <a class="collapsed" data-toggle="collapse" data-target="#collapseTwo" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                        Inactive Partners
                    </a>
                </h5>
            </div>
            <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
                <div class="card-block">
                </div>
            </div>
        </div>
    </div>

有关如何解决此问题的任何见解？

Answer 1

绑定到锚点击事件并调用preventDefault是否会抑制导航中的更改？

<强>标记

<a ... (click)="handleClick($event)">...</a>

<强>组件

public handleClick(event: Event) {
  event.preventDefault();
}

您可能会发现直接使用Ng-Bootstrap而不是Bootstrap更容易。

Angular 4和Bootstrap 4手风琴头href触发不需要的导航

1 个答案: