Angular 5+的简单DnD树结构

Angular 5+的简单DnD树结构
插件名称 ngx-tree-dnd
发布时间 2020年5月24日
插件作者 Zicrael

Angular 5+树形结构,具有拖放功能,无依赖关系,AoT编译。简单快捷。

安装:

# NPM
$ npm install ngx-tree-dnd --save

导入NgxTreeModule模块

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { NgxTreeDndModule } from 'ngx-tree-dnd';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxTreeDndModule,   // 将NgxTreeDndModule添加到导入
    LibraryModule 
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

导入库后,您可以在Angular应用程序中使用它的组件,指令和管道:

<h1>
{{title}}
</h1>
<lib-ngx-tree-component [treeData]='youTree' [config]='config'></lib-ngx-tree-component>

样式

您需要导入树的默认样式(您可以通过重写类来更改它们)

"apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css",
        "node_modules/ngx-tree-dnd/styles-tree-dnd.css" 
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],