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

【问题标题】：ng-bootstrap accordion panel color changeng-bootstrap 手风琴面板颜色变化
【发布时间】：2018-01-31 13:03:27
【问题描述】：

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

我有一个表格，我使用 ngb-accordion 将我的表格分成两部分。认为 第一个面板 (ngb-panel) 包含详细联系信息和 第二个面板包含教育细节。

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

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

谁能帮我解决这个问题？

【问题讨论】：

标签： angular accordion ng-bootstrap

【解决方案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;
  }
}

【讨论】：