Я пытаюсь создать аккордеон, где вы можете нажимать на каждый аккордеон, но я также хотел бы иметь еще одну кнопку, где щелчок расширяет или сворачивает все аккордеоны.

Итак, прямо сейчас у меня есть этот компонент .ts:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-faq',
  templateUrl: './faq.component.html',
  styleUrls: ['./faq.component.scss'],

})
export class FaqComponent implements OnInit {

  accordion1: boolean;
  accordion2: boolean;
  accordion3: boolean;
  accordionAll: boolean;

  constructor() { }

  ngOnInit() {
  }

}

Теперь каждый аккордеон - это просто какой-то CSS, и затем я могу активировать каждый с помощью:

<div class="accordion-header" (click)="accordion1 = !accordion1" [ngClass]="accordion1 ? 'is-active' : ''">Accordion 1</div>

А затем я могу придать ему стиль и активировать контент аккордеона с этим конкретным состоянием accordion1.

Для разворачивания / сворачивания у меня сейчас есть что-то вроде этого:

<div *ngIf="!accordionAll" (click)="accordion1 = true; accordion2 = true; accordion3 = true; accordionAll = true"></div>
<div *ngIf="accordionAll" (click)="accordion1 = false; accordion2 = false; accordion3 = false; accordionAll = false"></div>

В некотором смысле это работает. Но если вдруг у меня будет 20 разных аккордеонов, это будет хоррендеус. Кроме того, мне не нравится, что мне нужно иметь два div, поскольку какая-то анимация (например, значок) в этом случае не работает так хорошо.

Итак, мой вопрос: как мне сделать это «правильным» способом, чтобы не было беспорядка с множеством аккордеонов, и где я действительно могу развернуть / свернуть все с помощью только одной кнопки?

0
Denver Dang 15 Сен 2021 в 22:59

2 ответа

Лучший ответ

Поскольку вы уже отслеживаете состояние accordionAll, вам не нужно передавать логическое значение методу.

<div (click)="toggleAll()"></div>
toggleAll(): void { 
  this.accordionAll = !this.accordionAll
  this.accordion1 = this.accordionAll;
  this.accordion2 = this.accordionAll;
  this.accordion3 = this.accordionAll
}
1
Meqwz 15 Сен 2021 в 20:13

Думаю, что-то подобное сработает.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-faq',
  templateUrl: './faq.component.html',
  styleUrls: ['./faq.component.scss'],

})
export class FaqComponent implements OnInit {

  accordion1: boolean;
  accordion2: boolean;
  accordion3: boolean;
  accordionAll: boolean;

  constructor() { }

  ngOnInit() {
  }

  toogleAll() {
     this.accordion1 = this.accordionAll;
     this.accordion2 = this.accordionAll;
     this.accordion3 = this.accordionAll;

     this.accordionAll = !this.accordionAll;
  }

}
<div *ngIf="!accordionAll" (click)="toogleAll()"></div>
<div *ngIf="accordionAll" (click)="toogleAll()"></div>
1
naxsi 15 Сен 2021 в 20:14