angular - 移动 div 未触发点击功能

Question

我有一个div正在移动的，因为我每 20 毫秒改变一次它的位置。但是当我点击那个 div 时，关联的功能不起作用。我想知道这是否与 div 位置变化非常快有关。

<div class="box-position" 
  [style.top.px]="box.top" 
  [style.left.px]="box.left"
  (click)="onTarget(box)"></div>

ngOnit(){
  //the observable events occurs each 20ms
  this.service.subscribe(data => this.box = data)
}

onTarget(box){
  console.log("clicked")
}

这是实时代码

标签： angular

Answer 1

在您的示例中，使用ngFor结构指令并更改对数组中元素的引用。因此，每次更改参考时，角度都会破坏并重新创建 DOM。

这意味着您无法使单击事件正常工作，因为您破坏了侦听单击事件的元素。

有不同的解决方案可以防止重建 DOM：

1）使用ngForTrackBy输入

html

<ng-template ngFor ... [ngForTrackBy]="trackByFn">

零件

trackByFn(i: number) {
   return i;
}

例子

2) 改变对象

boxes: any[]=[{ left: 0, top: 120}];
...

this.boxes[0].left = move++ % 700;

例子