угловой 2 нгбаккордеон программно вызывать (panelChange) - PullRequest
Новая
       7

угловой 2 нгбаккордеон программно вызывать (panelChange)

0 голосов
/ 03 июля 2018

У меня есть ngbAccordion с событием panelChange, которое прекрасно работает. Что мне интересно, есть ли способ в ngOnInit, если я могу программно вызвать этот метод? 

<ngb-accordion #regularAccordion="ngbAccordion" *ngFor="let item of cartItems; index as i" activeIds={{activeIds}} (panelChange)="toggleAccordion($event, item)">

(panelChange) метод, который я хочу вызвать: 

toggleAccordion(event: any, item: any) {
  const accords = this.regularAccordions.toArray();      
  this.accordionStatus.set(event.panelId, event.nextState);
  if (accords.length > 1) {
    const lastItem = this.activeIds[0];
    if (this.activeIds.length > 0) {
      const currentPanel = this.activeIds.includes(event.panelId);
      if (currentPanel) {
        this.activeIds = [];
      }
    } else {
      this.activeIds = [];
      this.activeIds.push(event.panelId);
    }
    // when you select a second accordion and set status in map to true for one the other doesn't get set to false.
    this.regularAccordions.toArray().forEach(singleAccordion => {
      if (singleAccordion.activeIds.length > 0) {
        if (lastItem !== event.panelId) {
          this.accordionStatus.set(lastItem, false);
          this.activeIds = [];
          this.activeIds.push(event.panelId);
        }

      // singleAccordion.activeIds = [];
      } else {
       singleAccordion.activeIds = this.activeIds;
      }
    });
  } else {
    this.activeIds = [];
    this.activeIds = event.panelId;
  }
  this.setSelectedItem(item);
}

1 Ответ

0 голосов
/ 03 июля 2018

Да, вы можете.

Имейте @ViewChild для вашей ссылки #regularAccordion, а затем с помощью ngAfterViewInit установите прослушиватель, который предоставляет вам ngb:

@ViewChild ('regularAccordion') regularAccordion: NgbAccordion; (Импорт NgbAccordion )

ngAfterViewInit() { this.ref.panelChange .subscribe(panel => console.log(panel)); }

Рабочий образец: stackblitz.com

...