Angular. DoCheck и KeyValueDiffers

Если @Input является примитивом или объектом, у которого меняется ссылка, то изменения обнаруживаются в хуке ngOnChanges. Если объект мутирует, то такое изменение можно отследить через хук ngDoCheck. Вызывается чрезмерное количество раз, поэтому следует избегать его использования, чтобы не было проблем с производительностью.

Допустим имеется @Input() объект с одним свойством:

interface Data { name: string };

Отследить его изменение можно следующим образом:

  • Сохранить объект при изменении ссылки в ngOnChanges
  • Проверять name в ngDoCheck
export class DataComponent {
  @Input() data: Data;
  private localData: Data;

  constructor(private cdr: ChangeDetectorRef) {}

  ngOnChanges() {
    this.localData = this.data;
  }

  ngDoCheck() {
    if (this.localData.name !== this.data.name) {
      this.cdr.markForCheck();
    }
  }
}

Если интерфейс объекта более сложный или количество свойств неизвестно, то надо проходить по всем свойствам и их сравнивать. Это можно сделать с помощью функций сравнения объектов, например equals или isEqual. Однако в Angular есть встроенный механизм, который называется Differs.

  • IterableDiffer - сравнение итерируемых объектов, например массивов
  • KeyValueDiffers - сравнение свойств объектов

Первоначально требуется создать начальное значение, например пустой объект {}

constructor(private differs: KeyValueDiffers) {
    this.differ = this.differs.find({}).create();
}

Далее производить сравнение

const changes = this.differ.diff({ name: 'Вася' });
if (changes) {
    // объект изменился
}

Пример использования

import {
  Component,
  ChangeDetectorRef,
  Input,
  KeyValueDiffers,
  DoCheck,
  ChangeDetectionStrategy
} from "@angular/core";

@Component({
  selector: "app-hello",
  templateUrl: "./hello.component.html",
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class HelloComponent implements DoCheck {
  @Input() data: { name: string };
  private differ = this.differs.find({}).create();

  constructor(
    private cdr: ChangeDetectorRef,
    private differs: KeyValueDiffers
  ) {}

  ngDoCheck() {
    const changes = this.differ.diff(this.data);
    if (changes) {
      console.log("Object changed");
      changes.forEachChangedItem(item => console.log("Changed", item));
      changes.forEachAddedItem(item => console.log("Added", item));
      changes.forEachRemovedItem(item => console.log("Removed", item));
      this.cdr.markForCheck();
    } else {
      console.log("No changes");
    }
  }
}

StackBlitz

Похожие записи

@Directive v/s @Component in Angular

Компоненты создают DOM элементы и добавляют к ним поведение, а директивы только добавляют поведение к существующим DOM элементам

13 августа 2018 г. в Angular

@Attribute() декоратор

Аналогично @Input() позволяет получить значение атрибута с хоста компонента/директивы, но не отслеживает дальнейшее изменение атрибута.

15 сентября 2019 г. в Angular

Переиспользуемые анимации в Angular

Для создания анимации используется функция animation(). Для её использования — useAnimation(). Приводится пример переиспользуемой анимации, а также создание анимации через литерал объекта.

09 октября 2018 г. в Angular