ng-bootstrap 手风琴：如何将 class 添加到 nbg-panel 的包装器？

Question

当 ngb-panel 是展开。我怎样才能做到这一点？

根据我的研究，我使用了

(panelChange)='panelShadow($event)'

获取活动面板（即展开面板）的事件如下：

{panelId: "panel2", nextState: true, preventDefault: ƒ}
panelId: "panel2"
nextState: true
preventDefault: ƒ ()
__proto__: Object

现在：我想添加 class "open" 与已经存在的 class .card 到扩展面板

我想要这样的输出...

[stackblitz] 现场演示是 here

Answer 1

https://stackblitz.com/edit/angular-ng-bootstrap-ngb-accordion-expanded-shadow-problem

也许这不是最好的方法，但它通过删除不必要的 .open class 来扩展您自己的代码来完成工作。class 在每张卡片关闭时添加。

更新：
使代码段与默认活动面板兼容...
1. cardClass="open" 添加到活动面板的 ngb-panel 元素
2.主要逻辑更新如下

import { Component, ViewChild, ElementRef, Renderer2 } from "@angular/core";

export interface NgbPanelChangeEvent {
  nextState: boolean;
  panelId: string;
  preventDefault: () => void;
}

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.scss"]
})
export class AppComponent {
  lastPanelId: string = null;
  defaultPanelId: string = "panel2";

  panelShadow($event: NgbPanelChangeEvent, shadow) {
    console.log($event);

    const { nextState } = $event;

    const activePanelId = $event.panelId;
    const activePanelElem = document.getElementById(activePanelId);

    if (!shadow.isExpanded(activePanelId)) {
      activePanelElem.parentElement.classList.add("open");
    }

    if(!this.lastPanelId) this.lastPanelId = this.defaultPanelId;

    if (this.lastPanelId) {
      const lastPanelElem = document.getElementById(this.lastPanelId);

      if (this.lastPanelId === activePanelId && nextState === false)
        activePanelElem.parentElement.classList.remove("open");
      else if (this.lastPanelId !== activePanelId && nextState === true) {
        lastPanelElem.parentElement.classList.remove("open");
      }

    }

    this.lastPanelId = $event.panelId;
  }
}

ng-bootstrap 手风琴：如何将 class 添加到 nbg-panel 的包装器？

ng-bootstrap accordion : How to add class to wrapper of nbg-pannel?

angular

angular8

ng-bootstrap

angular9