Angular обновляет нерелевантный элемент DOM

Question

У меня очень простой компонент в Angular (v9). Намерение здесь состоит в том, чтобы напечатать текущую дату и время при первом показе компонента и после 2-секундной задержки, включить кнопку: Вот код для app.component.ts:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  currentDate: Date;
  disabledButton: boolean = true;

  constructor() {
    setTimeout(() => {
      this.disabledButton = false;
    }, 2000);
  }

  getCurrentDate() {
    return new Date();
  }
}

и мой код для app.component.html:

<div>
  <h5>Current date: {{ getCurrentDate() }}</h5>
</div>

<button class="btn btn-primary" [disabled]="disabledButton">Add user</button>

Приложение во время запуска:

После задержки:

Мой вопрос: почему после задержки Angular также повторно запускает getCurrentDate(), когда единственным изменением является значение disabledButton?

Answer 1

Методы в Angular шаблонах будут переоцениваться при каждом запуске обнаружения изменений. Это бесполезно и может привести к нежелательному поведению, как в вашем случае. Узнайте больше о том, почему вы должны избегать вызовов методов в шаблонах здесь

Я бы предложил использовать конструктор или ngOnInit() для инициализации полей класса и использовать их в своих шаблонах. Angular Обнаружение изменений вызовет ngOnInit после того, как компонент был создан