Обнаружение изменений в Angular: все, что вам нужно знать

Некоторые ловушки жизненного цикла вызываются до обновления DOM (3,4,5), а некоторые после (9). Таким образом, если у вас есть иерархия компонентов A -> B -> C , то вот порядок вызовов ловушек и обновлений привязок:

 A: AfterContentInit A: AfterContentChecked A: Update bindings B: AfterContentInit B: AfterContentChecked B: Update bindings C: AfterContentInit C: AfterContentChecked C: Update bindings C: AfterViewInit C: AfterViewChecked B: AfterViewInit B: AfterViewChecked A: AfterViewInit A: AfterViewChecked 

Изучение последствий

Давайте предположим, что у нас есть следующее дерево компонентов:

Как мы узнали выше, каждый компонент связан с представлением компонента. Каждое представление инициализируется с помощью ViewState.ChecksEnabled , что означает, что когда Angular запускает обнаружение изменений, каждый компонент в дереве будет проверен.

Предположим, мы хотим отключить обнаружение изменений для AComponent и его дочерних AComponent . Это легко сделать — нам просто нужно установить ViewState.ChecksEnabled в false . Изменение состояния является операцией низкого уровня, поэтому Angular предоставляет нам несколько открытых методов, доступных в представлении. Каждый компонент может получить связанный вид через токен ChangeDetectorRef . Для этого класса документы Angular определяют следующий открытый интерфейс:

 class ChangeDetectorRef { markForCheck() : void detach() : void reattach() : void detectChanges() : void checkNoChanges() : void } 

Давайте посмотрим, как мы можем использовать это в наших интересах.

открепление

Первый метод, который позволяет нам манипулировать состоянием, это detach , который просто отключает проверки текущего представления:

 detach(): void { this._view.state &= ~ViewState._ChecksEnabled_; } 

Посмотрим, как это можно использовать в коде:

 export class AComponent { constructor(public cd: ChangeDetectorRef) { this.cd.detach(); } 

Это гарантирует, что при выполнении следующего обнаружения изменений левая ветвь, начинающаяся с AComponent будет пропущена (оранжевые компоненты проверяться не будут):

Здесь нужно отметить две вещи. Во-первых, даже если мы изменили состояние для AComponent , все его дочерние компоненты также не будут проверяться. Во-вторых, поскольку обнаружение изменений не будет выполняться для компонентов левой ветви, DOM в их шаблонах также не будет обновляться. Вот небольшой пример, чтобы продемонстрировать это:

 @Component({ selector: 'a-comp', template: `<span>See if I change: {{changed}}</span>`}) export class AComponent { constructor(public cd: ChangeDetectorRef) { this.changed = 'false'; setTimeout(() => { this.cd.detach(); this.changed = 'true'; }, 2000); } 

При первой проверке компонента диапазон будет отображаться с текстом « See if I change: false . И в течение двух секунд, когда changed свойство обновляется до true , текст в диапазоне не будет изменен. Однако, если мы удалим строку this.cd.detach() , все будет работать так, как ожидается.

Присоедините

Как показано в первой части статьи, OnChanges жизненного цикла OnChanges будет по-прежнему запускаться для AComponent если входная привязка aProp изменяется в AppComponent . Это означает, что, как только мы получим уведомление об изменении входных свойств, мы можем активировать детектор изменений для текущего компонента, чтобы запустить обнаружение изменений и отключить его на следующем тике. Вот фрагмент, демонстрирующий это:

 export class AComponent { @Input() inputAProp; constructor(public cd: ChangeDetectorRef) { this.cd.detach(); } ngOnChanges(values) { this.cd.reattach(); setTimeout(() => { this.cd.detach(); }) } 

Это потому, что reattach просто устанавливает бит ViewState.ChecksEnabled :

 reattach(): void { this._view.state |= ViewState.ChecksEnabled; } 

Это почти эквивалентно тому, что сделано, когда для ChangeDetectionStrategy установлено значение OnPush : оно отключает проверку после первого запуска обнаружения изменений и включает ее при изменении свойства привязки родительского компонента, а также отключает после запуска.

Обратите внимание, что OnChanges запускается только для самого верхнего компонента в отключенной ветви, а не для каждого компонента в отключенной ветви.

markForCheck

Метод reattach включает проверки только для текущего компонента, но если обнаружение изменений не включено для его родительского компонента, это не будет иметь никакого эффекта. Это означает, что метод reattach полезен только для самого верхнего компонента в отключенной ветке.

Нам нужен способ включить проверку всех родительских компонентов вплоть до корневого компонента. И для этого есть способ — markForCheck :

 let currView: ViewData|null = view; while (currView) { if (currView.def.flags & ViewFlags._OnPush_) { currView.state |= ViewState._ChecksEnabled_; } currView = currView.viewContainerParent || currView.parent; } 

Как видно из реализации, он просто выполняет итерацию вверх и включает проверки для каждого родительского компонента вплоть до корневого.

Когда это полезно? Как и в случае с ngOnChanges , ngDoCheck жизненного цикла ngDoCheck запускается, даже если компонент использует стратегию OnPush . Опять же, он запускается только для самого верхнего компонента в отключенной ветви, а не для каждого компонента в отключенной ветви. Но мы можем использовать эту ловушку для выполнения пользовательской логики и пометить наш компонент как подходящий для одного цикла обнаружения изменений. Поскольку Angular проверяет только ссылки на объекты, мы можем реализовать грязную проверку некоторых свойств объекта:

 Component({ ..., changeDetection: ChangeDetectionStrategy.OnPush }) MyComponent { @Input() items; prevLength; constructor(cd: ChangeDetectorRef) {} ngOnInit() { this.prevLength = this.items.length; } ngDoCheck() { if (this.items.length !== this.prevLength) { this.cd.markForCheck(); this.prevLenght = this.items.length; } } 

detectChanges

Существует способ запустить обнаружение изменений один раз для текущего компонента и всех его дочерних элементов. Это делается с detectChanges метода detectChanges . Этот метод запускает обнаружение изменений для текущего представления компонента независимо от его состояния, что означает, что проверки могут оставаться отключенными для текущего представления, и компонент не будет проверяться во время следующих регулярных запусков обнаружения изменений. Вот пример:

 export class AComponent { @Input() inputAProp; constructor(public cd: ChangeDetectorRef) { this.cd.detach(); } ngOnChanges(values) { this.cd.detectChanges(); } 

DOM обновляется при изменении свойства ввода, даже если ссылка на детектор изменений остается отсоединенной.

checkNoChanges

Этот последний метод, доступный на детекторе изменений, гарантирует, что в текущем цикле обнаружения изменений не будет внесено никаких изменений. По сути, он выполняет операции 1,7 и 8 из приведенного выше списка и выдает исключение, если он находит измененную привязку или определяет, что DOM следует обновить.