使用Angular来实现手风琴效果

背景

我想使用Angular实现类似的功能，当点击“显示详细信息…”时，手风琴会展开。我尝试使用Animations实现它。
起初，我打算使用ngx-bootstrap的AccordionModule，但是无法很好地实现我想要的效果，所以我选择了这种方法。

前提 tí) – premise

我正在使用@angular/animations。
据说从Angular4开始更改了设置方法，我在引入时参考了以下文章。
当我从Angular2迁移到Angular4时遇到了一些问题[动画]。

另外，我想要在詳細顯示和隱藏時添加加號和減號圖標，所以我從Font Awesome中隨機選取了一些圖標。如果沒有也沒關係。

实施

接下来是实施部分。
源代码在这里。

// import for animations
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  imports: [
    BrowserAnimationsModule,
  ],
})

<!-- アコーディオンを開く閉じるのボタン -->
<div class="pointerCursor" (click)="onAccordion($event)">
  <i [ngClass]="showDetail ? 'fa fa-minus-circle' : 'fa fa-plus-circle'"></i>
      &nbsp;詳しい情報を{{showDetail ? '隠す' : '表示する'}}
</div>

<!-- アコーディオンの中身 -->
<div *ngIf="showDetail" [@accordion]>
    〜アコーディオンで表示したい内容〜
</div>

import { trigger, style, animate, transition } from '@angular/animations';

@Component({
  selector: 'sample-app',
  templateUrl: './accordion.html',
  styleUrls: ['./accordionStyle.scss'],
  animations: [
    trigger('accordion', [
      transition(':enter', [
        style({ height: '0', opacity: 0, overflow: 'hidden' }),
        animate('500ms', style({ height: '*', opacity: 1 }))
      ]),
      transition(':leave', [
        style({ height: '*', opacity: '1', overflow: 'hidden' }),
        animate('500ms', style({ height: '0' }))
      ])
    ])
  ],
})

export class AccordionTest {

  public showDetail: boolean;

  constructor(){
  }

  // アコーディオン開閉時に呼ばれるイベント
  onAccordion($event) {
    this.showDetail = !this.showDetail;
  }
}

因为我想要给它一个可点击的感觉，所以我应用了以下的CSS。

// マウスポインターを指マークにする
.pointerCursor {
    cursor: pointer;
}

最终 / 最后

请提供更多的上下文或要求。

Angular2からAngular4に移行して、アニメーションがうまく動かなくなった部分[Animation]
Angular 6を使用している場合、*ngIf、transitionが機能しない
CSSだけを使用してアコーディオンを作成する方法