要在Angular Material对话框中使用Angular拖放CDK,你需要确保以下几点:
import { DragDropModule } from '@angular/cdk/drag-drop';
import { MatDialogModule } from '@angular/material/dialog';
@NgModule({
imports: [
DragDropModule,
MatDialogModule
],
// ...
})
export class AppModule { }
DragDrop
服务,并将其注入到构造函数中。import { Component, OnInit } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';
import { DragDrop } from '@angular/cdk/drag-drop';
@Component({
selector: 'app-dialog',
templateUrl: './dialog.component.html',
styleUrls: ['./dialog.component.css']
})
export class DialogComponent implements OnInit {
constructor(
public dialogRef: MatDialogRef,
private dragDrop: DragDrop
) { }
ngOnInit(): void {
}
}
cdkDrag
指令来启用拖放功能。
Drag me!
请确保你在对话框组件的模板中正确使用了cdkDrag
指令,并且将对话框组件作为一个弹出对话框使用。
import { Component, OnInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { DialogComponent } from './dialog/dialog.component';
@Component({
selector: 'app-root',
template: `
`
})
export class AppComponent {
constructor(private dialog: MatDialog) { }
openDialog(): void {
this.dialog.open(DialogComponent, {
width: '250px',
height: '250px'
});
}
}
这样,你就可以在Angular Material对话框中使用Angular拖放CDK了。确保按照上述步骤正确导入和使用相关模块和服务。