在 Angular 中使用动态输入和鼠标移动时未显示 SVG 标题工具提示答案

【问题标题】：SVG title tooltip not shown when using dynamic input and mousemove in Angular在 Angular 中使用动态输入和鼠标移动时未显示 SVG 标题工具提示
【发布时间】：2020-09-08 22:05:22
【问题描述】：

鉴于以下 Angular 应用程序，SVG titles 将显示为第一个 HelloComponent 的 rects 的工具提示（悬停时），但不会显示其他的。如果删除 (mousemove) 属性，则会显示所有工具提示。这里发生了什么？如何解决？

https://stackblitz.com/edit/angular-ivy-df8cxp?file=src/app/app.component.ts

import { Component, Input } from "@angular/core";

@Component({
  selector: "hello",
  template: `
    <svg (mousemove)="onMouseMove($event)">
      <rect
        *ngFor="let item of items"
        [attr.x]="item.x"
        width="10"
        height="100%"
      >
        <title>{{ item.x }}</title>
      </rect>
    </svg>
  `,
  styles: [
    `
      :host {
        display: flex;
      }

      svg {
        flex-grow: 1;
      }
    `
  ]
})
export class HelloComponent {
  @Input() items: { x: number }[];

  onMouseMove(event: MouseEvent) {}
}

import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  template: `
    <hello [items]="items1"></hello>
    <hello [items]="items2"></hello>
    <hello [items]="getItems3()"></hello>
  `
})
export class AppComponent {
  items1 = [{ x: 100}, { x: 150 }];

  get items2() {
    return [{ x: 200}, { x: 250 }];
  }

  getItems3() {
    return [{ x: 300}, { x: 350 }];
  }
}

【问题讨论】：

标签： angular svg

【解决方案1】：

解决问题的一种方法是避免将项绑定到属性 getter（如 items2）或系统地创建新数组的方法（如 getItems3）。

另一种解决方案是在*ngFor 循环中按索引跟踪rect 元素：

<rect *ngFor="let item of items; trackBy: trackByIndex" ...>
  ...
</rect>

trackByIndex(index, item) {
  return index;
}

请参阅this stackblitz 以获取演示。

【讨论】：