我正在使用 Angular2 及其 Material Design( https://material.angular.io ) 创建一个小型网络应用程序,我在其中使用 MdDialog 来使用以下代码显示对话框:
import {Component} from '@angular/core';
import {MdDialog, MdDialogRef} from '@angular/material';
@Component({
selector: 'dialog-result',
templateUrl: './dialog-result.html',
})
export class DialogResult {
selectedOption: string;
constructor(public dialog: MdDialog) {}
openDialog() {
let dialogRef = this.dialog.open(Dialog);
dialogRef.afterClosed().subscribe(result => {
this.selectedOption = result;
});
}
}
@Component({
selector: 'dialog',
templateUrl: './dialog.html',
})
export class Dialog {
constructor(public dialogRef: MdDialogRef<Dialog>) {}
}
我想让对话框可以使用鼠标拖动或移动,这样我也可以看到我的页面内容。
最佳答案
我正在使用 Draggabilly 库。
当打开一个对话框组件时,在选项中传递一个服装'panelClass':
let dialogRef = this.dialog.open(Dialog, {
panelClass: 'dialog-container'
});
然后,在对话框组件 ngOnInit 钩子(Hook)中初始拖动:
const holder = new draggablilly('.dialog-container');
关于angular - 如何在 Angular 2 Material Design 中使 MdDialog 可拖动(可移动),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43916202/