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:[]
    }
    ]
  }]