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