ng2-tree

用法

1.npm install --save ng2-tree

在应用的module里导入TreeModule

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { TreeModule } from 'ng2-tree';
 
@NgModule({
  declarations: [MyComponent],
  imports:      [BrowserModule, TreeModule],
  bootstrap:    [MyComponent]
})
export class MyModule {
}

然后，我们需要在使用时引入TreeModel,[tree]属性绑定了这个树形控件所需要的所有数据和一些设置：

// 1 -导入需要的类和接口
import { TreeModel } from 'ng2-tree';
 
@Component({
  selector: 'myComp',
  // 2 - 为tree属性设置对象
  template: `<tree [tree]="tree"></tree>`
})
class MyComponent {
  // 3 - 确保tree对象是treeModel的实例
  public tree: TreeModel = {
    value: 'Programming languages by programming paradigm',
    children: [
      {
        value: 'Object-oriented programming',
        children: [
          {value: 'Java'},
          {value: 'C++'},
          {value: 'C#'}
        ]
      },
      {
        value: 'Prototype-based programming',
        children: [
          {value: 'JavaScript'},
          {value: 'CoffeeScript'},
          {value: 'Lua'}
        ]
      }
    ]
  };
}

此外，你还需要引入style让tree可以使用，在angular-cli.json
文件里引入"../node_modules/ng2-tree/styles.css"
最后，tree拥有诸多监听事件，以满足需求，例如节点选择事件：

// 1 -导入相关类和接口
import { TreeModel, NodeEvent } from 'ng2-tree';
 
@Component({
  selector: 'myComp',
  // 2 - 监听事件并处理
  template: `<tree [tree]="tree" (nodeSelected)="logEvent($event)"></tree>`
})
class MyComponent {
  public tree: TreeModel = { ... };
 
  // 3 - print caught event to the console
  public logEvent(e: NodeEvent): void {
    console.log(e);
  }
}

API

tree所有的API如下

 <tree
      [tree]="tree"
      [settings]="settings"
      (nodeRemoved)="handleRemoved($event)"
      (nodeRenamed)="handleRenamed($event)"
      (nodeSelected)="handleSelected($event)"
      (nodeMoved)="handleMoved($event)"
      (nodeCreated)="handleCreated($event)"
      (nodeExpanded)="handleExpanded($event)"
      (nodeCollapsed)="handleCollapsed($event)">
 </tree>

tree

[tree]

引入接口import { TreeModel } from 'ng2-tree';,[tree]属性
接口定义：

interface TreeModel {
  value: string | RenamableNode;
  id: string | number;
  children?: Array<TreeModel>;
  loadChildren?: ChildrenLoadingFunction;
  settings?: TreeModelSettings;
}

参照上面的用法可以快速构造出 tree所需要的数据和一些设置
数据：点击查看详细
设置：treeModel里还一个可以可选的配置属性

{
  value: 'Prototype-based programming',
  settings: {
    'static': true,
    'rightMenu': true,
    'leftMenu': true,
    'cssClasses': {
      'expanded': 'fa fa-caret-down fa-lg',
      'collapsed': 'fa fa-caret-right fa-lg',
      'leaf:': 'fa fa-lg',
      'empty': 'fa fa-caret-right disabled'
    },
    'templates': {
      'node': '<i class="fa fa-folder-o fa-lg"></i>',
      'leaf': '<i class="fa fa-file-o fa-lg"></i>',
      'leftMenu': '<i class="fa fa-navicon fa-lg"></i>'
    }
  },
  children: [
    {value: 'JavaScript'},
    {value: 'CoffeeScript'},
    {value: 'Lua'}
  ]
}

[setting]

[setting]对象必须是Ng2TreeSettings类型，现在只有一个属性可用 - rootIsVisible，此设置允许您使树的根节点不可见，此属性是可选的

const treeSettings: Ng2TreeSettings = {
  rootIsVisible: false
}

events

ng2-tree提供了大量有用的事件供使用
下图简单说明了事件的类型

NodeEvent是tree事件等级的最高级。它定义了节点的事件接收器。
NodeDestructiveEvent是所有对tree做出结构或者属性值更改的所有事件的父类

点击查看→NodeSelectedEvent
点击查看→NodeMovedEvent
点击查看→NodeRemovedEvent
点击查看→NodeCreatedEvent
点击查看→NodeRenamedEvent
点击查看→NodeExpandedEvent
点击查看→NodeCollapsedEvent

ng2-tree控件