在 Angular 项目中很难实现 Accordian 效果 -

Question

我正在尝试在我的一个 Angular 视图中实现 Accordian 效果。您可以在 w3schools 找到最基本的 Accordian 示例。请看一下这个 stackblitz url，我在其中尝试使用我在原始项目中使用的相同方法来实现相同的功能。

https://stackblitz.com/edit/stackblitz-starters-v54vdwmj

什么都不起作用。令人困惑的是，控制台中没有编译错误或运行时错误，这确实没有任何帮助。如果出现某种错误，它至少会给我指明某个方向。

你能让这个手风琴 stackblitz 工作吗？ 谢谢！

Answer 1

前往

angular.dev

并阅读文档，这是开始您的 Angular 之旅的最佳选择！

第一个手风琴将重复，因此它应该是一个单独的组件。

手风琴的内容，可以是HTML，所以我们可以使用角度概念

content projection

来投影手风琴内部的内容。

我们可以使用

(click)

属性绑定监听单击事件，并切换跟踪打开关闭状态的信号。

该组件将采用

input

信号，即标题。

<button class="accordion" (click)="toggle.set(!toggle())"  [ngClass]="{'active': toggle() }">{{title()}}</button>

我们可以使用属性绑定

[title]

来传入标题。

<app-accordion [title]="'Section 1'">

最后我们使用两个指令

ngClass

和

ngStyle

有条件地将类添加到手风琴。

<button class="accordion" (click)="toggle.set(!toggle())"  [ngClass]="{'active': toggle() }">{{title()}}</button>
<div class="panel" [ngStyle]="{'display': toggle() ? 'block' : 'none' }">

完整代码：

TS：

import { Component, input, OnInit, signal } from '@angular/core';
import { accordianUtility } from './utils/accordian-utility';
import { NgClass, NgStyle } from '@angular/common';

@Component({
  selector: 'app-accordion',
  imports: [NgClass, NgStyle],
  template: `
    <button class="accordion" (click)="toggle.set(!toggle())"  [ngClass]="{'active': toggle() }">{{title()}}</button>
    <div class="panel" [ngStyle]="{'display': toggle() ? 'block' : 'none' }">
      <p>
        <ng-content/>
      </p>
    </div>
  `,
})
export class Accordion implements OnInit {
  title = input('');
  toggle = signal(false);
  ngOnInit(): void {}
}

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

  accordianClicked() {
    accordianUtility();
  }
}

HTML：

<h2>Accordion</h2>

<app-accordion [title]="'Section 1'">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat.
</app-accordion>
<app-accordion [title]="'Section 2'">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat.
</app-accordion>
<app-accordion [title]="'Section 3'">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  consequat.
</app-accordion>

Stackblitz 演示