ng-bootstrap 手风琴面板颜色变化

Question

我正在使用 ng-bootstrap 手风琴。 如果有错误，我需要在 ngb-accordion 中显示面板的标题。 因为我在 ngb-accordion 里面有表格。

我有一个表格，我使用 ngb-accordion 将我的表格分成两部分。 假设第一个面板 (ngb-panel) 包含联系方式，第二个面板包含教育细节。

如果第一个面板下的字段有错误，其标题颜色需要更改为红色。 因为在显示 UI 时会创建 header 的 DOM 元素。 我无法动态更改颜色。

<form>
    <ngb-accordion #acc="ngbAccordion" [closeOthers]="true">
                <ngb-panel title="First Panel" [id]="firstPanel" [ngclass]="haveErrror: firstPanelHaveError">
                    <ng-template ngbPanelContent>
                    ............Contact Details..................
                    </ng-template>
                </ngb-panel>
                <ngb-panel title="Second Panel" [id]="secondPanel" [ngclass]="haveErrror: secondPanelHaveError">
                    <ng-template ngbPanelContent>
                    ..............Educational Details................
                    </ng-template>
                </ngb-panel>
    </ngb-accordion>
</form>

渲染内容

<form>
   <div class="card">
       <div role="tab" id="[object Object]-header" class="card-header active">
         <a href="" aria-expanded="true" aria-controls="[object Object]" aria-disabled="false">First Panel</a>
       </div>

        ....................... 
        --Other Contents---
        ........................
        ............................ 
  </div>

任何人都可以帮助我吗？

Answer 1

您可以通过 deep 访问 ngb-accordion 风格。

例如，您可以在 CSS 文件中添加此内容以更改标题

/deep/ ngb-accordion{

  .btn-link{
    margin-bottom: 0;
    color: #656565;
    font-size: 1.2rem;
    font-weight: normal;
    background-color: transparent;
    text-decoration: none!important;

  }

 .btn-link:hover{
     color: #df5329;
     font-weight: bold;
    text-decoration: none!important;
  }
}