【Angular2】手风琴样式页面制作

【前言】

　　新生页面里面有一个公约，是手风琴样式的页面。这种样式比较美观，也能节省页面空间。关于手风琴样式页面的制作方式，和大家分享一下~

一、实现思路：

        引用bootstrap样式中的accordion组件实现。

二、代码实现：

1、module文件：

引入手风琴扩展包：

 

import { AccordionModule } from 'ngx-bootstrap/accordion';

2、html文件：

<div class="container">
  <!-- 只显示一条公约 -->
  <accordion (ngModel)="oneAtATime" [closeOthers]="oneAtATime">
    <accordion-group #group *ngFor="let convention of conventionList">
      <div accordion-heading class="customClass">
        {
  {convention.conventionName}}
        <!-- 加上>符号 -->
        <i class="pull-right float-xs-right glyphicon" [ngClass]="{'glyph