要实现Angular6递归列表拖放,可以使用Angular CDK(Component Dev Kit)提供的拖放功能。
首先,确保已安装Angular CDK依赖包。可以使用以下命令进行安装:
npm install @angular/cdk --save
接下来,创建一个递归列表组件,例如RecursiveListComponent
。在该组件中,导入和使用Angular CDK提供的CdkDragDrop
和moveItemInArray
函数。
recursive-list.component.html:
- {{item.name}}
0" class="nested-list">
recursive-list.component.ts:
import { Component, Input } from '@angular/core';
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
@Component({
selector: 'app-recursive-list',
templateUrl: './recursive-list.component.html',
styleUrls: ['./recursive-list.component.css']
})
export class RecursiveListComponent {
@Input() items: any[];
drop(event: CdkDragDrop) {
moveItemInArray(this.items, event.previousIndex, event.currentIndex);
}
}
然后,创建一个父级组件,例如AppComponent
,并在该组件中初始化递归列表的数据。
app.component.html:
Recursive List Drag and Drop
app.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
items = [
{ name: 'Item 1', children: [
{ name: 'Subitem 1' },
{ name: 'Subitem 2' }
]},
{ name: 'Item 2', children: [
{ name: 'Subitem 3' },
{ name: 'Subitem 4' }
]}
];
}
最后,在应用的根模块中导入和声明DragDropModule
。
app.module.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { AppComponent } from './app.component';
import { RecursiveListComponent } from './recursive-list/recursive-list.component';
@NgModule({
declarations: [
AppComponent,
RecursiveListComponent
],
imports: [
BrowserModule,
DragDropModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
这样,你就完成了Angular6递归列表拖放的实现。在浏览器中运行应用程序后,你将能够拖动和重新排序递归列表中的项。