要使Angular Material的可拖动对话框正常工作,您可以采取以下步骤:
npm install --save @angular/material @angular/cdk
DragDropModule
和DialogModule
。例如,在app.module.ts
中:import { DragDropModule } from '@angular/cdk/drag-drop';
import { MatDialogModule } from '@angular/material/dialog';
@NgModule({
imports: [
// other imports
DragDropModule,
MatDialogModule
],
// other module configurations
})
export class AppModule { }
MatDialog
打开对话框,并在配置中启用拖动。例如,在dialog.component.ts
中:import { Component } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog';
import { CdkDrag, CdkDragDrop, CdkDragStart } from '@angular/cdk/drag-drop';
@Component({
selector: 'app-dialog',
templateUrl: 'dialog.component.html',
styleUrls: ['dialog.component.css']
})
export class DialogComponent {
constructor(public dialogRef: MatDialogRef) {}
// Drag and drop event handler
onDragStarted(event: CdkDragStart) {
event.source.element.nativeElement.style.opacity = '0.5';
}
onDragEnded(event: CdkDragDrop) {
event.source.element.nativeElement.style.opacity = '1';
}
}
dialog.component.html
中:
MatDialog
服务。例如,在app.component.ts
中:import { Component } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { DialogComponent } from './dialog.component';
@Component({
selector: 'app-root',
template: `
`
})
export class AppComponent {
constructor(public dialog: MatDialog) {}
openDialog() {
this.dialog.open(DialogComponent);
}
}
这样,您就可以通过拖动对话框标题栏来移动对话框了。请确保在对话框的CSS样式中,标题栏或拖动手柄具有足够的样式以响应拖动事件。