Angular 自定义手风琴组件在单击时不会展开

Question

我在 Angular 9 中创建了一个自定义手风琴组件。但我面临一个问题。每次我点击手风琴时，它只会展开第一个按钮窗口。休息其他窗口不要展开或折叠。

为了更好地重现问题，我在此处附上了我的 StackBlitz 链接：

https://stackblitz.com/edit/angular-x4jjxr

我的代码：

html

<div *ngFor="let item of faq">
    <button #el class="accordion" (click)="toggleHelper()">
        <slot name="header">{{ item.question }}</slot>
    </button>
    <div class="panel">
        <slot name="details">
            {{ item.answer }}
        </slot>
    </div>
</div>

css

.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

.active,
.accordion:hover {
    background-color: #ccc;
}

.accordion:after {
    content: "\002B";
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.active:after {
    content: "\2212";
}

.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

Ts

  import { Component, OnInit, Input, ElementRef, ViewChild } from "@angular/core";

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent implements OnInit {

faq: FAQ = [
    {'question': 'one', 'answer': 'Sentence 1'},
    {'question': 'two', 'answer': 'Sentence 1'},
  {'question': 'three', 'answer': 'Sentence 1'},
];

    @Input() icon = "arrow";
    @ViewChild("el", { read: ElementRef }) el: ElementRef;

    constructor() {}


    ngOnInit(): void {

    }


    toggleHelper() {
        this.el.nativeElement.classList.toggle("active");
        const panel = this.el.nativeElement.nextElementSibling;
        if (panel.style.maxHeight) {
            panel.style.maxHeight = null;
        } else {
            panel.style.maxHeight = panel.scrollHeight + "px";
        }
    }
}

Answer 1

原因是模板中有多个模板引用变量实例。而且您在组件类中使用 ViewChild 每次只会访问第一个孩子。

您必须使用 ViewChildren 来访问所有手风琴图标的数组。然后你就可以随心所欲地处理它了。

您需要在代码中进行的更改：

<div *ngFor="let item of faq; let i = index;">
    <button #el class="accordion" (click)="toggleHelper(i)">
        <slot name="header">{{ item.question }}</slot>
    </button>
    <div class="panel">
        <slot name="details">
            {{ item.answer }}
        </slot>
    </div>
</div>

@ViewChildren("el", { read: ElementRef }) el: QueryList<ElementRef>;

toggleHelper(i: number) {
    this.el.toArray()[i].nativeElement.classList.toggle("active");
    const panel = this.el.toArray()[i].nativeElement.nextElementSibling;
    if (panel.style.maxHeight) {
        panel.style.maxHeight = null;
    } else {
        panel.style.maxHeight = panel.scrollHeight + "px";
    }
}

请在此处找到 stackblitz 实例：https://stackblitz.com/edit/angular-nusunu