如何在没有背景的情况下关闭垫子对话框?
How to close a mat dialog without a backdrop on clicking outside?
如何通过单击外部关闭此 stackblitz example (最小、可重现的示例。) 中的对话框?
如果我删除 属性 hasBackdrop: false
-> Working Stackblitz Example
则效果很好
有很多方法可以实现这一点。一个人会听到 window 次点击。 Stackblitz
export class DialogOverviewExampleDialog {
private inited;
constructor(
public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
@Inject(MAT_DIALOG_DATA) public data: DialogData) { }
ngOnInit() {
this.dialogRef.afterOpened().subscribe(() => {
this.inited = true;
})
}
@HostListener('window:click')
onNoClick(): void {
if (this.inited) {
this.dialogRef.close();
}
}
}
但我建议您编辑背景的 css,这样它仍然不可见,但功能仍然存在。
.cdk-overlay-dark-backdrop {
background: transparent;
}
创建 Angular Material Dialog that closes when clicking outside the dialog box (while creating the appearance that there is no backdrop) is to use the built-in library CSS class cdk-overlay-transparent-backdrop
and apply it using the MatDialogConfig
属性 backdropClass
.
的标准方法
openDialog
方法是:
openDialog(): void {
const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
backdropClass: 'cdk-overlay-transparent-backdrop',
hasBackdrop: true,
width: '250px'
});
}
简而言之,您需要自己处理点击 - 监听点击并确定它们是否在对话框之外。这使您不会像背景那样捕获点击事件。 Here's a StackBlitz example 基于你的:
@Component({
selector: 'dialog-overview-example',
templateUrl: 'dialog-overview-example.html',
styleUrls: ['dialog-overview-example.css'],
})
export class DialogOverviewExample {
@HostListener('document:click', ['$event'])
clickout(event) {
if (this.clickoutHandler) {
this.clickoutHandler(event);
}
}
animal: string;
name: string;
clickoutHandler: Function;
dialogRef: MatDialogRef<DialogOverviewExampleDialog>;
constructor(public dialog: MatDialog) {}
openDialog(): void {
setTimeout(() => {
this.dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
width: '250px',
hasBackdrop: false
});
this.dialogRef.afterOpened().subscribe(() => {
this.clickoutHandler = this.closeDialogFromClickout;
});
this.dialogRef.afterClosed().subscribe(() => {
this.clickoutHandler = null;
});
});
}
closeDialogFromClickout(event: MouseEvent) {
const matDialogContainerEl = this.dialogRef.componentInstance.hostElement.nativeElement.parentElement;
const rect = matDialogContainerEl.getBoundingClientRect()
if(event.clientX <= rect.left || event.clientX >= rect.right ||
event.clientY <= rect.top || event.clientY >= rect.bottom) {
this.dialogRef.close();
}
}
}
@Component({
selector: 'dialog-overview-example-dialog',
templateUrl: 'dialog-overview-example-dialog.html',
})
export class DialogOverviewExampleDialog {
constructor(
public hostElement: ElementRef,
public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
@Inject(MAT_DIALOG_DATA) public data: DialogData) {
}
onNoClick(): void {
this.dialogRef.close();
}
}
如何通过单击外部关闭此 stackblitz example (最小、可重现的示例。) 中的对话框?
如果我删除 属性 hasBackdrop: false
-> Working Stackblitz Example
有很多方法可以实现这一点。一个人会听到 window 次点击。 Stackblitz
export class DialogOverviewExampleDialog {
private inited;
constructor(
public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
@Inject(MAT_DIALOG_DATA) public data: DialogData) { }
ngOnInit() {
this.dialogRef.afterOpened().subscribe(() => {
this.inited = true;
})
}
@HostListener('window:click')
onNoClick(): void {
if (this.inited) {
this.dialogRef.close();
}
}
}
但我建议您编辑背景的 css,这样它仍然不可见,但功能仍然存在。
.cdk-overlay-dark-backdrop {
background: transparent;
}
创建 Angular Material Dialog that closes when clicking outside the dialog box (while creating the appearance that there is no backdrop) is to use the built-in library CSS class cdk-overlay-transparent-backdrop
and apply it using the MatDialogConfig
属性 backdropClass
.
openDialog
方法是:
openDialog(): void {
const dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
backdropClass: 'cdk-overlay-transparent-backdrop',
hasBackdrop: true,
width: '250px'
});
}
简而言之,您需要自己处理点击 - 监听点击并确定它们是否在对话框之外。这使您不会像背景那样捕获点击事件。 Here's a StackBlitz example 基于你的:
@Component({
selector: 'dialog-overview-example',
templateUrl: 'dialog-overview-example.html',
styleUrls: ['dialog-overview-example.css'],
})
export class DialogOverviewExample {
@HostListener('document:click', ['$event'])
clickout(event) {
if (this.clickoutHandler) {
this.clickoutHandler(event);
}
}
animal: string;
name: string;
clickoutHandler: Function;
dialogRef: MatDialogRef<DialogOverviewExampleDialog>;
constructor(public dialog: MatDialog) {}
openDialog(): void {
setTimeout(() => {
this.dialogRef = this.dialog.open(DialogOverviewExampleDialog, {
width: '250px',
hasBackdrop: false
});
this.dialogRef.afterOpened().subscribe(() => {
this.clickoutHandler = this.closeDialogFromClickout;
});
this.dialogRef.afterClosed().subscribe(() => {
this.clickoutHandler = null;
});
});
}
closeDialogFromClickout(event: MouseEvent) {
const matDialogContainerEl = this.dialogRef.componentInstance.hostElement.nativeElement.parentElement;
const rect = matDialogContainerEl.getBoundingClientRect()
if(event.clientX <= rect.left || event.clientX >= rect.right ||
event.clientY <= rect.top || event.clientY >= rect.bottom) {
this.dialogRef.close();
}
}
}
@Component({
selector: 'dialog-overview-example-dialog',
templateUrl: 'dialog-overview-example-dialog.html',
})
export class DialogOverviewExampleDialog {
constructor(
public hostElement: ElementRef,
public dialogRef: MatDialogRef<DialogOverviewExampleDialog>,
@Inject(MAT_DIALOG_DATA) public data: DialogData) {
}
onNoClick(): void {
this.dialogRef.close();
}
}