如何使用 ng-bootstrap 一次 show/collapse 所有手风琴面板

Question

使用 ng-bootstrap 手风琴模块，默认情况下它工作正常。尝试自定义切换功能，点击按钮后立即 show/collapse。

经过一番调试，现已实现功能。想确定方法好不好。

这是我试过的：

组件：

    import { Component, ElementRef } from '@angular/core';
import {NgbAccordionConfig,NgbPanelChangeEvent} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'ngbd-accordion-basic',
  templateUrl: 'src/accordion-basic.html',
  providers: [NgbAccordionConfig]
})
export class NgbdAccordionBasic {
  constructor(public config: NgbAccordionConfig, public elementRef: ElementRef) {
    // customize default values of accordions used by this component tree
    this.config.closeOthers = false;
  }
  toggle(event: NgbPanelChangeEvent, acc: NgbAccordion){
      if(acc.activeIds.length > 0){
        acc.panels._results.forEach(function(val, idx){
        val.isOpened = false;
        acc.activeIds.pop(val.id);
        });
      } else {
        acc.panels._results.forEach(function(val, idx){
        val.isOpened = true;
        acc.activeIds.push(val.id);
      });
      }

  }
}

HTML:

<button (click)="toggle($event, acc);">Toogle all accordions</button>
<ngb-accordion #acc="ngbAccordion">
  <ngb-panel title="Simple" id="ngb-panel-0">
    <ng-template ngbPanelContent>
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia
      aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
      sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,
      craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
      occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
      labore sustainable VHS.
    </ng-template>
  </ngb-panel>
  <ngb-panel id="ngb-panel-1">
    <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
      aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
      sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,
      craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
      occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
      labore sustainable VHS.
    </ng-template>
  </ngb-panel>
  <ngb-panel title="last" id="ngb-panel-2">
    <ng-template ngbPanelContent>
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia
      aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor,
      sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica,
      craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings
      occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus
      labore sustainable VHS.
    </ng-template>
  </ngb-panel>
</ngb-accordion>

Answer 1

首先，以 _ 开头的变量是私有的，没有记录。你不应该尝试使用它们。其他未记录的属性，如 panels 也不应使用。

NgbAccordion 有一个文档化的 activeIds 属性，它允许告诉哪些面板应该是活动的。所以就用它吧。为您的所有面板分配一个 ID：

<ngb-panel title="Simple" id="ngb-panel-0">

（其他人也一样，有一个递增的计数器）

然后，点击按钮，检查 activeIds 是否为空。如果是这样，将 activeIds 设置为包含所有 ID 的数组。否则，将其设置为空数组。

toggle(acc: NgbAccordion) {
  if (acc.activeIds.length) {
    acc.activeIds = [];
  }
  else {
    acc.activeIds = [0, 1, 2].map(i => `ngb-panel-${i}`);
  }
}

Demo

如何使用 ng-bootstrap 一次 show/collapse 所有手风琴面板

How to show/collapse all the accordion panels at once using ng-bootstrap

ng-bootstrap

angular