Angular4 树组件的使用

树用的不多,但是有些项目的确需要,那么angular4是如何使用树的,我看过很多树组件,也看群里面有人问一些树的问题,可惜在我做这个树之后,我在众多的树里面选了这颗树,个人感觉挺好用的,功能众多,基本可以郎阔所有需求.

废话不说,先上效果图:

要实现这样的树,首先package.json配置package.json

    "ng2-tree": "^2.0.0-alpha.8",

然后npm install(我说的是在cli环境下的)

接着就是在appmodule中注入:

import {TreeModule} from 'ng2-tree';

TreeviewModule.forRoot(),

接着就是用到的地方了,

html中

  <tree    [tree]="fonts"    (nodeRemoved)="onNodeRemoved($event)"    (nodeRenamed)="onNodeRenamed($event)"    (nodeSelected)="onNodeSelected($event)"    (nodeMoved)="onNodeMoved($event)"    (nodeCreated)="onNodeCreated($event)"    (nodeExpanded)="onNodeExpanded($event)"    (nodeCollapsed)="onNodeCollapsed($event)">  </tree>

component中

  public fonts: TreeModel = {    value: '一级菜单',    children: [      {        value: '二级菜单1',        settings: {          'static': true        },        children: [          {value: '三级菜单1'},          {value: '三级菜单2'},          {value: '三级菜单3'},          {value: '三级菜单4'},          {value: '三级菜单5'},          {            value: '三级菜单6',            children: [              {value: '四级菜单1'},              {value: '四级菜单2'},              {value: '四级菜单3'}            ]          }        ]      },      {        value: '二级菜单2',        children: [          {value: '三级菜单1'},          {value: '三级菜单2'},          {value: '三级菜单3'},          {value: '三级菜单4'},          {value: '三级菜单5'},          {value: '三级菜单6'}        ]      },      {        value: '二级菜单3',        // children property is ignored if "loadChildren" is present        children: [{value: 'I am the font that will be ignored'}],        loadChildren: (callback) => {          setTimeout(() => {            callback([              {value: '三级菜单1'},              {value: '三级菜单2'},              {value: '三级菜单3'},              {value: '三级菜单4'},            ]);          }, 5000);        }      }    ]  };  private static logEvent(e: NodeEvent, message: string): void {    console.log(e);    // alertify.message(`${message}: ${e.node.value}`);  }  public onNodeRemoved(e: NodeEvent): void {    HomeComponent.logEvent(e, 'Removed');  }  public onNodeMoved(e: NodeEvent): void {    HomeComponent.logEvent(e, 'Moved');  }  public onNodeRenamed(e: NodeEvent): void {    HomeComponent.logEvent(e, 'Renamed');  }  public onNodeCreated(e: NodeEvent): void {    HomeComponent.logEvent(e, 'Created');  }  public onNodeSelected(e: NodeEvent): void {    HomeComponent.logEvent(e, 'Selected');  }  public onNodeExpanded(e: NodeEvent): void {    HomeComponent.logEvent(e, 'Expanded');  }  public onNodeCollapsed(e: NodeEvent): void {    HomeComponent.logEvent(e, 'Collapsed');  }

具体的方法在这里不详细赘述了!

欢迎加入我的Angular4交流QQ群:560334140,不定期更新Angular4相关干货!同时也是交流问题的地方!

个人微信公众号,欢迎大家关注下,支持下,谢谢!

微信公众号名称:U世界的V梦想

二维码: