如何禁用MDBootstrap的角度匹配

Question

我有一个问题，如果有人知道如何禁用选项，点击和折叠手风琴从MDBootstrap。在他们的文档中，我找不到一种方法来做到这一点。下面是链接：https://mdbootstrap.com/docs/b5/angular/components/accordion/

有没有人有主意，怎么做？下面是带有代码的示例，所以这就是为什么我没有在这个问题中编写任何代码的原因。

埃枫树：

<mdb-accordion
          [multiple]="true"
>
  <mdb-accordion-item>
    <ng-template mdbAccordionItemHeader>Accordion Item #1</ng-template>
    <ng-template mdbAccordionItemBody>
     Accordion tab 1
    </ng-template>
  </mdb-accordion-item>

  <mdb-accordion-item>
    <ng-template mdbAccordionItemHeader>Accordion Item #2</ng-template>
    <ng-template mdbAccordionItemBody>
     Accordion tab 2
    </ng-template>
  </mdb-accordion-item>

  <mdb-accordion-item>
    <ng-template mdbAccordionItemHeader>Accordion Item #3</ng-template>
    <ng-template mdbAccordionItemBody>
      Accordion tab 3
    </ng-template>
  </mdb-accordion-item>
</mdb-accordion>

感谢每个人。

Answer 1

我使用this.accordion.expandAll();打开所有面板，然后使用event.preventDefault()对panelChange事件进行异常处理，以防止它们随后崩溃。

https://ng-bootstrap.github.io/#/components/accordion/api#NgbPanelChangeEvent

https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

<ngb-accordion
  #acc="ngbAccordion"
  activeIds="ngb-panel-0"
  (panelChange)="onPanelChange($event)">
  <ngb-panel #panel title="Simple">
    <ng-template ngbPanelContent>
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
      richardson ad squid. 3 wolf moon officia
    </ng-template>
  </ngb-panel>
  <ngb-panel>
    <ng-template ngbPanelTitle>
      <span>&#9733; <b>Fancy</b> title &#9733;</span>
    </ng-template>
    <ng-template ngbPanelContent>
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
      richardson ad squid. 3 wolf moon officia
    </ng-template>
  </ngb-panel>
  <ngb-panel title="Something">
    <ng-template ngbPanelContent>
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry
      richardson ad squid. 3 wolf moon officia
    </ng-template>
  </ngb-panel>
</ngb-accordion>

@Component({
  selector: 'ngbd-accordion-basic',
  templateUrl: './accordion-basic.html',
})
export class NgbdAccordionBasic implements AfterViewInit {
  @ViewChild('acc') accordion: any;

  ngAfterViewInit() {
    this.accordion.expandAll();
  }

  onPanelChange(event: any) {
    if (event?.nextState === false) {
      console.log('no change allowed!');
      event.preventDefault();
    }
  }
}

工作示例：https://stackblitz.com/edit/angular-zakst1?file=src%2Fapp%2Faccordion-basic.html

MD自举

省略每个.accordion-collapse上的data-mdb-parent属性，以便在打开另一个项目时使手风琴项目保持打开状态。

https://mdbootstrap.com/docs/standard/components/accordion/#section-always-open