jquery - 如何在 jQuery mouseover 中调用 Angular 方法？

Question

我正在使用 Angular 8。我正在阅读一个 svg 文件并查找样式为 has 的元素stroke:none。然后，每当有人将鼠标悬停在该元素上时，我都会打开一个对话框。

我需要在 jQuery mouseover 中打开 Angular Material 对话框。此警报有效但this.openDialog()无效。

这给了我这个错误：

未捕获的类型错误：component.openDialog 不是函数

主要组件.ts

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

myfunction() {
    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')) {
          const component = this;
          $(this).mouseover(() => {
               component.openDialog();
               alert('HELLO');
          });
        }
      });
    }, 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-button mat-dialog-close (click)="onNoClick()">Close</button>
  </div>
</div>

标签： jquerymodal-dialogangular8mouseover