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