jquery - 如何关闭 Angular 材质对话框?
问题描述
我正在使用 Angular 8。我正在读取一个 svg 文件并找到样式为中风的元素:无。然后每当有人悬停该元素时打开一个对话框。对话框正在打开,但当我单击外部或关闭按钮时它没有关闭。
我对按钮 id="btn" 尝试了相同的对话框,它成功关闭。
没有错误即将到来。
main.component.html
<object id="svg-object" data="assets/svg/xxx.svg" type="image/svg+xml"></object>
<button mat-button id="btn">Launch dialog</button>
主要组件.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);
}
对话框组件.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();
});
解决方案
您可以在打开对话框时执行此操作,您需要再传递一个 param disableClose: false
。
openDialog() {
const dialogRef = this.dialog.open(DialogBoxComponent, {
height: '100px',
width: '450px',
disableClose: false
});
}
如果你想手动关闭
closeDialog() {
this.dialog.closeAll();
}
推荐阅读
- mongodb - 无法识别的管道阶段名称:'$unwind'
- three.js - 如何将 A-Frame html 着色器文本优化为 VR 可视化?
- c# - UWP C# 切换框架内容问题和崩溃
- abstract-syntax-tree - Crystal 解析器创建了一个 ASTNode,它在运行时应该是 Crystal::Expressions 但不知何故是一个 Crystal::Nop
- google-tag-manager - Google 跟踪代码管理器:如果 DOM Ready 中的变量值为“true”,则不要在 Window Loaded 中触发代码
- php - 如何合并两个或多个环境
- mysql - MySQL 5.7.10 简单查询比 5.6.35 慢
- javascript - 量角器黄瓜中没有执行递归函数
- windows - Powershell 脚本检查多台机器上的应用程序版本。
- php - Laravel 尝试保存到数据库时出错