angular - 通过单击标题上的任意位置展开 Ng-Bootstrap Accordion 的每个部分

Question

如何通过单击标题的任何部分而不仅仅是标题来触发每个面板的展开事件？

 <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>

Answer 1

您可以使用 css 来做到这一点，并使 Accordion 标题成为全宽元素

/deep/ div.card-header  a {
  display: block;
}

或者使用带有显示 block 的 html 元素的自定义 header ，例如 div

<ngb-accordion [closeOthers]="true">

     <ngb-panel >    
        <ng-template ngbPanelTitle  >
          <div>&#9733; <b>Fancy</b> title &#9733;</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>