小编tha*_*ali的帖子

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

DialogBoxComponent.ts

  constructor(public dialogRef: MatDialogRef<MainComponent>) …