Angular 6 或 5 单击按钮时出现性能问题

Question

我目前正在开发 Angular 6 应用程序。我面临一个简单组件的性能问题：单击按钮、递增或递减计数器变量。

counter.component.html看起来像这样：

<div>Count: <strong>{{ currentCnt }}</strong></div>

<button (click)="manageCounter()"> + </button>

counter.component.ts看起来像这样：

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

@Component({
  selector: 'counter',
  templateUrl: './counter.component.html'
})
export class CounterComponent {
  public currentCnt = 0;

  public manageCounter() {
    this.currentCount++;
  }
}

这是一个非常基本的例子。计数器组件与其他几个组件一起用于更大的应用。

问题是，当我在智能手机上快速单击按钮几次，或者如果我将 Chrome 设置 => 性能更改为 CPU：减速，并连续单击按钮几次，计数器会非常缓慢地递增或递减，并带有延迟几毫秒。

我想知道，也许这种行为是由于事件冒泡造成的。也许有更好的方法来以不同的方式注册事件？

你知道如何解决 Angular 6 或 5 中的此类性能问题吗？

谢谢你！！

Answer 1

您可以尝试停止传播：

超文本标记语言

<button (click)="manageCounter($event)"> + </button>

组件.ts

public manageCounter($event) {
    $event.stopPropagation();
    this.currentCount++;
}