如何关闭"角度材质"对话框?

Question

我正在使用Angular 8。我正在阅读一个 svg 文件，发现带有样式的元素有 stroke：none。然后，每当有人将鼠标悬停在该元素上时，就会打开一个对话框。对话框正在打开，但当我单击外部或关闭按钮时它没有关闭。

我尝试了相同的对话框到按钮 id="btn"，它已成功关闭。

没有错误出现。

主组件.html

<object id="svg-object" data="assets/svg/xxx.svg" type="image/svg+xml"></object>
<button mat-button id="btn">Launch dialog</button>

main.component.ts

ngOnInit() {
this.myfunction();
$('#btn').mouseover(() => {
this.openDialog();
});
}
openDialog() {
const dialogRef = this.dialog.open(DialogBoxComponent, {
height: '100px',
width: '450px',
});
}
myfunction() {
const component = this;
const mySVG: any = document.getElementById('svg-object');
mySVG.addEventListener('load',() => {
svgDoc = mySVG.contentDocument;
$(svgDoc).find('path').css('fill','fill-opacity','fill-rule','stroke').each(function() {
const style = $(this).attr('style');
if($(this).attr('style').includes('stroke:none')) {
$(this).mouseover(() => {
component.openDialog();
});
}
});
}, false);
}

DialogBoxComponent.ts

constructor(public dialogRef: MatDialogRef<MainComponent>) {
}
onNoClick(): void {
this.dialogRef.close();
}

对话框组件.html

<h3 mat-dialog-title>TOPIC</h3>
<div class="container">
<div class="device-config-main-container d-flex flex-column">
</div>
<div mat-dialog-actions>
<button mat-raised-button matDialogClose (click)="onNoClick()">Close</button>
</div>
</div>

下面的按钮悬停对话框关闭工作成功：

$('#btn').mouseover(() => {
this.openDialog();
});

Answer 1

您可以在打开对话框时执行此操作，您需要再传递一个参数disableClose: false。

openDialog() {
const dialogRef = this.dialog.open(DialogBoxComponent, {
height: '100px',
width: '450px',
disableClose: false
});
}

如果您想手动关闭

closeDialog() {
this.dialog.closeAll();
}

Answer 2

更改

constructor(public dialogRef: MatDialogRef<MainComponent>)

自

constructor(public dialogRef: MatDialogRef<DialogBoxComponent>)

在 DialogBoxComponent 中，并考虑以角度方式而不是 jquery 来做，即

<button mat-button (mouseenter)="mouseEnter() ">Launch dialog</button>
mouseEnter() {
this.dialogRef = this.dialog.open(DialogBoxComponent, {
height: '100px',
width: '450px',
});
}

在某些情况下，如果您想获取某些 UI 元素的引用，请考虑使用 ViewChild