下面是一个示例代码,演示如何在Angular 7中为动态创建的组件添加拖放行为。
@angular/cdk
和@angular/material
依赖项。可以使用以下命令进行安装:npm install @angular/cdk @angular/material
DynamicComponent
。可以使用ng generate component dynamic-component
命令生成该组件。dynamic-component.component.ts:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-dynamic-component',
templateUrl: './dynamic-component.component.html',
styleUrls: ['./dynamic-component.component.css']
})
export class DynamicComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}
dynamic-component.component.html:
Dynamic Component
作为容器。
app.component.html:
- 在主组件中创建一个方法来处理拖放事件。
app.component.ts:
import { Component } from '@angular/core';
import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
components = [1, 2, 3, 4, 5];
drop(event: CdkDragDrop) {
moveItemInArray(this.components, event.previousIndex, event.currentIndex);
}
}
- 在app.module.ts中导入
DragDropModule
并将其添加到imports
数组中。
app.module.ts:
import { DragDropModule } from '@angular/cdk/drag-drop';
@NgModule({
declarations: [
AppComponent,
DynamicComponent
],
imports: [
BrowserModule,
DragDropModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
现在,当您运行应用程序时,您将能够在Angular 7中为动态创建的组件添加拖放行为。
相关内容