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 酱紫