Question

使用ng-bootstrap手风琴模块，默认情况下工作正常。尝试自定义切换功能，该功能将在按钮单击时立即显示/折叠。

经过一些调试，现在实现了功能。我想确保方法的好坏。

这是我试过的：

组件：

    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一次显示/折叠所有手风琴面板

1 个答案: