如何通过单击标题的任何部分而不仅仅是标题来触发每个面板的扩展事件？
<ngb-accordion [closeOthers]="true">
<ngb-panel title="Vehículo 1">
<ng-template ngbPanelContent>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem sed ipsum harum, atque excepturi quaerat saepe quia iste
ratione rem culpa aut praesentium. Quasi voluptatem, beatae iure minus alias ipsa a quas necessitatibus placeat
itaque esse dolor at impedit vero in atque hic nulla molestiae quod nihil provident aliquam est excepturi? Dignissimos
harum quasi sed, quibusdam officiis quos ea provident error fugit, vero veniam? Deserunt, laboriosam quasi. Pariatur
reprehenderit odit dolore voluptates doloremque deserunt, minima reiciendis libero quia! Sunt, itaque possimus
dignissimos voluptates, hic quasi velit nobis deleniti, quae magni dolor sit excepturi. Tempore deleniti tempora
delectus cumque provident ipsam.
</ng-template>
</ngb-panel>
<ngb-panel title="Vehículo 2">
<ng-template ngbPanelContent>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor cupiditate quibusdam, eveniet optio libero, adipisci vitae
iusto numquam laudantium totam veritatis, vero officiis ullam est veniam minima molestiae dolores minus maxime
enim tenetur ipsam consequuntur aliquam obcaecati. Ad non deleniti consectetur neque doloribus fugiat sed. Modi
laborum quis labore quod earum quia? Quae rem provident vel quam nulla! Minima id exercitationem dicta blanditiis,
velit odio similique in, a molestias reprehenderit adipisci possimus maiores eius. Veritatis architecto, ab eveniet
totam harum quae deleniti rerum voluptatibus qui possimus ipsa maiores magnam tenetur sed inventore officia dolorum
modi ad obcaecati id repellendus? Consequuntur!
</ng-template>
</ngb-panel>
</ngb-accordion>
答案 0 :(得分：3)
您可以使用css并将手风琴标题设为元素全宽
/deep/ div.card-header a {
display: block;
}
或使用带有显示block的html元素的自定义标头，例如div
<ngb-accordion [closeOthers]="true">
<ngb-panel >
<ng-template ngbPanelTitle >
<div>★ <b>Fancy</b> title ★</div>
</ng-template>
<ng-template ngbPanelContent>
Lorem ipsum dolor sit amet consectetur
</ng-template>
</ngb-panel>
<ngb-panel title="Vehículo 2">
<ng-template ngbPanelContent>
Lorem ipsum dolor sit ame
</ng-template>
</ngb-panel>
</ngb-accordion>
答案 1 :(得分：0)
只需将卡片标题包装在a标记元素中，如下面的代码段所示，并确保每个a标记都具有以下属性：
data-toggle="collapse" data-target="#collapseOne"其中＆＃34; collapseOne＆＃34;需要用相应的卡体元素的id替换。
点击＆＃34;运行代码段＆＃34;在下面并展开到完整页面进行测试（并调整Angular代码以生成以下HTML输出）：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container mt-3">
<div class="row">
<div class="col">
<div id="accordion">
<div class="card">
<a href="#" data-toggle="collapse" data-target="#collapseOne">
<div class="card-header" id="headingOne">
<p class="mb-0 ml-3">
Collapsible Group Item #1
</p>
</div>
</a>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<a href="#" data-toggle="collapse" data-target="#collapseTwo">
<div class="card-header" id="headingTwo">
<p class="mb-0 ml-3">
Collapsible Group Item #2
</p>
</div>
</a>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
<div class="card">
<a href="#" data-toggle="collapse" data-target="#collapseThree">
<div class="card-header" id="headingThree">
<p class="mb-0 ml-3">
Collapsible Group Item #3
</p>
</div>
</a>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
<div class="card-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
</div>
</div>
</div>
</div>
</div>
</div>
</div>