angular2/4 樹形結構菜單示例

樹型結構

組件

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-tree',
  templateUrl: './tree.component.html',
  styleUrls: ['./tree.component.scss']
})
export class TreeComponent {

  // 超簡單, 重點: 接收上級的值
  // 能夠爲樹創建一個接口, 這裏簡化爲any
  @Input() treelists: any

  // 點擊動做
  itemClick(i) {
    // 創建一個服務來接收這個值, 或者藉助雙向綁定, 處理動做
    i._open = i._open  // 本例只簡單演示開關, 藉助 treelists自己實現
    console.log(i)
  }
}

模板內容

<ul>
  <li *ngFor="let item of treelists">
    <button md-button (click)="itemClick(item)">{{item.title}}</button>
    <!--調用組件自己並 傳值給下級: [treelists]="item.items"-->
    <app-tree *ngIf="item._open && item.items && item.items.length" [treelists]="item.items"></app-tree>
  </li>
</ul>

以上樹組件完成, 在其餘組件中調用此組件便可

<app-tree [treelists]="menu"></app-tree>

數據/賦值

menu = [{
    title: '1',
    _open:true, //默認打開第一級
    items: [{
      title: '1.1',
      items: [
        {
          name: '1.1.1',
          title: 'xxx',
          items: []
        }
      ]
    }, {
      title: '1.2',
      items:[]
    }
    ]
  }]