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

【问题标题】：Multiple mouse events not working when binding innerHTML绑定innerHTML时多个鼠标事件不起作用
【发布时间】：2019-09-04 15:50:41
【问题描述】：

我正在尝试以角度自动生成复杂/交互式 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] 都可以正常工作。

【问题讨论】：

标签： angular mouseevent innerhtml

【解决方案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)
   }
}

现在所有鼠标事件都可以完美运行了。

【讨论】：