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