Angular. Обнаружение изменений

Главная » Видеоуроки » JavaScript » Angular. Обнаружение изменений

Angular приложение — это дерево компонентов. Когда в одном из компонентов что-то меняется (в результате изменений в DOM, работы таймаутов, интервалов, промисов, http запросов), то Angular проверяет все компоненты приложения. Это может отрицательно влиять на производительность. В этом уроке мы рассмотрим стратегию обнаружения изменений.

Чтобы предотвратить лишние проверки, необходимо в декораторе @Component указать стратегию изменений OnPush.

Код урока (стратегия обнаружения изменений OnPush)

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})

По умолчанию устанавливается стратегия ChangeDetectionStrategy.Default

Также разработчик может сам управлять запуском или отключением обнаружения изменений. Для этого в Angular есть класс ChangeDetectorRef c методами для управления запуском/отключением проверки изменений.

Код урока (user.component)

import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class UserComponent {

  date = new Date();

  constructor(private _changeDetector: ChangeDetectorRef) {
    setInterval(() => {
      this.date = new Date();
      this._changeDetector.detectChanges();
    },1000);
  }

  changeTitle() {

  }

}

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *


The reCAPTCHA verification period has expired. Please reload the page.

Pin It on Pinterest

Share This