树型结构
组件
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:[] } ] }]