如何关闭 Angular 材质对话框？答案

【问题标题】：How to close Angular material dialog box?如何关闭 Angular 材质对话框？
【发布时间】：2020-10-02 00:43:17
【问题描述】：

我正在使用 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>

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();
  }

DialogBoxComponent.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();
});

【问题讨论】：

@halfer 我在 myfunction() 中打开的对话框有问题。我找不到问题..请帮我找到这个。

标签： jquery angular8 mouseover mat-dialog

【解决方案1】：

改变

constructor(public dialogRef: MatDialogRef<MainComponent>)

到

constructor(public dialogRef: MatDialogRef<DialogBoxComponent>)

在 DialogBoxComponent 中并考虑使用 angular 方式而不是 jquery 即

<button mat-button (mouseenter)="mouseEnter() ">Launch dialog</button>

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

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

【讨论】：

实际上我需要识别 svg 文件中的元素，然后当有人将其悬停时调用弹出窗口。我发现用 css 识别 svg 元素的唯一方法是使用 Jquery。这就是为什么我在 jquery 函数中调用我的弹出窗口，如下所示。 ```

【解决方案2】：

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

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

如果你想手动关闭

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

【讨论】：