angular2/4 树形结构菜单示例

前端之家收集整理的这篇文章主要介绍了angular2/4 树形结构菜单示例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

树型结构

组件

  1. import { Component,Input } from '@angular/core';
  2.  
  3. @Component({
  4. selector: 'app-tree',templateUrl: './tree.component.html',styleUrls: ['./tree.component.scss']
  5. })
  6. export class TreeComponent {
  7.  
  8. // 超简单,重点: 接收上级的值
  9. // 可以为树建立一个接口,这里简化为any
  10. @Input() treelists: any
  11.  
  12. // 点击动作
  13. itemClick(i) {
  14. // 建立一个服务来接收这个值,或者借助双向绑定,处理动作
  15. i._open = i._open // 本例只简单演示开关,借助 treelists本身实现
  16. console.log(i)
  17. }
  18. }

模板内容

  1. <ul>
  2. <li *ngFor="let item of treelists">
  3. <button md-button (click)="itemClick(item)">{{item.title}}</button>
  4. <!--调用组件本身并 传值给下级: [treelists]="item.items"-->
  5. <app-tree *ngIf="item._open && item.items && item.items.length" [treelists]="item.items"></app-tree>
  6. </li>
  7. </ul>

以上树组件完成,在其他组件中调用此组件即可

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

数据/赋值

  1. menu = [{
  2. title: '1',_open:true,//默认打开第一级
  3. items: [{
  4. title: '1.1',items: [
  5. {
  6. name: '1.1.1',title: 'xxx',items: []
  7. }
  8. ]
  9. },{
  10. title: '1.2',items:[]
  11. }
  12. ]
  13. }]

猜你在找的Angularjs相关文章