ng-bootstrap手风琴:如何在nbg-pannel的包装器中添加类?

问题描述 投票:0回答:1

我想在扩展ngb-panel时向ngb-panel选择器的包装器(即'card'类)添加一个类('open')。我该如何实现?

根据我的研究,我使用过

(panelChange)='panelShadow($event)' 

获得活动面板(即展开面板)的事件,如下所示:

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

现在:我想将已存在的类。card的类“ open” 添加到展开的面板中

我想要这样输出...enter image description here

[stackblitz]现场演示为here

angular angular8 ng-bootstrap angular9
1个回答
1
投票

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

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

update:使代码段与默认的活动面板兼容...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;
  }
}
热门问题
推荐问题
最新问题