Угловая 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 => Производительность на ЦП: замедление и нажимаю кнопку несколько раз подряд, счетчик увеличивается илиочень медленно уменьшается, с задержкой в ​​несколько миллисекунд.

Мне интересно, может быть, такое поведение связано с всплеском событий.Возможно, есть лучший способ зарегистрировать события по-другому?

Знаете ли вы, как решить такую ​​проблему с производительностью в Angular 6 или 5?

Спасибо !!

Answer 1

Я собираюсь продолжить с возможностью. Если вы находитесь в режиме разработки, возможно, вы получаете больше лагов от zone.js. Я только что понял, что все мои проблемы, когда я запускаю ng serve --open .. но когда я запускаю задачу buildprod, версия prod бодрая.

ng build --target=production --environment=prod дай этому выстрел.

Редактировать: мне пришлось переключиться на ng build --prod в Angular 6.

Answer 2

Вы можете попробовать остановить распространение как:

HTML

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

component.ts

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