绑定 innerHTML 时多个鼠标事件不起作用

Question

我正在尝试在 angular 中自动生成 complex/interactive SVG 图像，但事件绑定似乎存在问题。

我试过只使用 [click] 事件，它工作正常并且事件被触发。此外，[mouseout] 事件可以单独使用或与 [click] 事件一起使用。但是当我添加 [mouseenter] 或 [mouseover] 时，不会触发其他事件。我试图只留下一个直接绑定到元素的事件并使用@HostListener Decorator 收听 [mouseout] 和 [click] 但它也不起作用！

我认为 [innerHTML] 必须对此做些什么，但它非常重要，我无法删除它。只是我不知道这个组的子元素是什么，它们是由用户动态生成或上传的，作为 adobe illustrator 生成的简单 SVG，所以我使用 js 到 XML 转换器来生成组的内部对象。

  <svg>
    <g id="group">
      <g *ngFor="let object of array"
        (mouseenter)="hoverStarted($event, object)"
        (mouseout)="hoverEnded($event, object)"
        (click)="objectClick(object)"
        [innerHTML]="getObjectInternalSvgString(object)"
        >
      </g>
    </g>
  </svg>

我希望触发所有鼠标事件 [mouseenter、mouseout、click]，但只有 [mouseenter] 被触发。当我删除 [mouseenter] 时，[mouseout] 和 [click] 都可以正常工作。

Answer 1

我找到了一个非常有效的解决方案！

首先，我从组中删除了 innerHTML 绑定并添加了一个 TemplateReference 标识符。

然后在 .ts 文件中我添加了 ViewChildren 和 QueryList 作为这个标识符，并且只在视图初始化后注入 innerHTML 一次。

  <svg>
    <g id="group">
      <g *ngFor="let object of array"
        (mouseenter)="hoverStarted($event, object)"
        (mouseout)="hoverEnded($event, object)"
        (click)="objectClick(object)"
        #groups
        >
      </g>
    </g>
  </svg>

@ViewChildren('groups') objectGroups: QueryList<ElementRef>;
ngAfterViewInit() {
   const objectArray = this.objectGroups.toArray();
   for ( const index in objectArray ) {
      objectArray[index].nativeElement.innerHTML = this.getObjectInternalSvgStringByIndex(index)
   }
}

现在所有的鼠标事件都可以正常工作了。

绑定 innerHTML 时多个鼠标事件不起作用

Multiple mouse events not working when binding innerHTML

innerhtml

mouseevent

angular