1

我有一个自定义指令，使用 HostListener 来检测鼠标何时进入列表元素，并使用 HostBinding 来更改元素的背景颜色。

  @HostBinding('style.backgroundColor') backgroundColor: string;

  @HostListener('mouseenter') mouseOver(eventData: Event) {
    this.backgroundColor = this.altColor;
  }

放置此指令的元素是“设备”列表。当点击一个设备时，会发出一个事件来通知其他组件，这些组件使用所选设备列出属于该设备的一系列传感器。

  onSelect(device: Device) {
    console.log('Device Chosen -> ' + device.name);
    this.deviceService.selectedDevice.emit(device);
  }

<mat-grid-tile
    *ngFor="let sensor of selectedDevice.sensors"
    (click)="onSelect(sensor)"
    <img src={{getImage(sensor.name)}} alt="" width=50%>
    <p> {{sensor.name}} </p>
</mat-grid-tile>

该功能工作正常。但是，我注意到当我在 getImage 函数（在 ngFor 循环期间使用）中放置一个 console.log 时，每次鼠标进入（或离开）应用指令的元素时都会调用该函数。即，当 HostListener 被触发时，传感器列表被重新加载？

使用组件的 ngOnChanges 没有获取任何内容。如果我删除指令，这种行为就会停止。当我与 ngx 图表交互以及图表进入动画时，也会发生相同的行为。

4

0 回答 0