ng2搭建系统-Accordion可折叠的面板

2017/03./09

其实吧 作为一个小渣子 并不太懂 大神们 为何 每次都要追求 某一种实现效果啊~~
膜拜 T T

今天 是来记录一下 关于这个accordion折叠面板

首先 需要在ng2工程中创建一个accordion-menu组件
创建指令为：ng g c accordion-menu

其次 需要把这个组件引用到你所要添加的父层模块中，我这里的父模块就直接指向根模块app.module.ts中，import引入，再添加到declarations中去。
代码为：

import { AccordionMenuComponent } from './accordion-menu/accordion-menu.component';
...
declarations: [
    AppComponent,
    AccordionMenuComponent
  ]

当我初始化显示视图时，我在app.module.html中写好布局
这个布局 大家都是可以自己定义的，只需要在你说放置折叠面板的地方引入accordion视图即可，我这边是这样的

    <div class="pane-wrapper">
      <app-accordion-menu></app-accordion-menu>
    </div>

啊哈哈 重头戏来了 到现在对这个代码还是掌握的 很薄弱啊

在accordion-menu.component.ts中

  onMenuClick(item) {
    this.seletItem = item;
  }
  onSubMenuClic(item){
    this.subSelectItem = item;
  }
  mDatas = [
    {
      name: '第一层1', href: '',
      child: [
        { name: '第二层', href: '#' },
        { name: '第二层', href: '#' },
        {
          name: '第二层', href: '#',
          child: [
            { name: '第三层', href: '#' },
          ]
        },
        {
          name: '第二层', href: '#',
          child: [
            { name: '第三层', href: '#' },
          ]
        }
      ]
    },
    {
      name: '第一层2', href: '',
      child: [
        { name: '第二层', href: '#' },
        { name: '第二层', href: '#' }
      ]
    }
  ];

  seletItem = this.mDatas[0];
  subSelectItem = null;

在其app.component.html中

<div id="jquery-accordion-menu" class="jquery-accordion-menu white">
  <ul id="demo-list">
    <li *ngFor="let d of mDatas" (click)='onMenuClick(d)' [class.active]='d==seletItem'>
      <a [class.submenu-indicator-minus]="d.child && d.child.length > 0 && d==seletItem">
        <i class="fa fa-database" aria-hidden="true"></i>{{d.name}}
        <span class="submenu-indicator" *ngIf="d.child && d.child.length > 0">+</span>
      </a>
      <ul *ngIf="d.child && d.child.length > 0" class="submenu" [style.display]="d==seletItem ? 'block':'none'">
        <li *ngFor="let subD of d.child" (click)='onSubMenuClic(subD)'>
          <a [class.submenu-indicator-minus]="subD.child && subD.child.length > 0 && subSelectItem==subD">
            <i class="fa fa-angle-left"></i>{{subD.name}}
            <span class="submenu-indicator" *ngIf="subD.child && subD.child.length > 0">+</span>
          </a>
          <ul *ngIf="subD.child && subD.child.length > 0" class="submenu" [style.display]="subSelectItem==subD ? 'block':'none'">
            <li *ngFor="let child of subD.child">
              <a>
              <i class="fa fa-angle-left"></i>{{child.name}}</a>
            </li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>

[懵逼脸] o.o

这些 弄完之后 就剩下具体的css样式 也是很费神 因为其中 有一些动态效果写入 transition 什么的 ~~

ok 酱紫