ChangeDetectorRef — Angular

Базовый класс, предоставляющий функциональность обнаружения изменений. Дерево обнаружения изменений объединяет все представления, в которых необходимо проверить изменения. Используйте методы, чтобы добавлять представления в дерево и удалять их из него, запускать обнаружение изменений и явно помечать представления как изменённые, то есть изменившиеся и требующие повторной отрисовки.

API

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

markForCheck

void

Когда для представления используется стратегия обнаружения изменений ChangeDetectionStrategy#OnPush (checkOnce), явно помечает представление как изменённое, чтобы его можно было проверить повторно.

Обычно компоненты помечаются как изменённые (требующие повторной отрисовки), когда изменяются входные данные или в представлении возникают события. Вызовите этот метод, чтобы гарантировать проверку компонента, даже если эти условия не были выполнены.

@returnsvoid

detach

void

Отсоединяет это представление от дерева обнаружения изменений. Отсоединённое представление не проверяется, пока его не подключат повторно. Используйте вместе с detectChanges() для выполнения локальных проверок обнаружения изменений.

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

@returnsvoid

detectChanges

void

Проверяет это представление и его дочерние представления. Используйте вместе с ChangeDetectorRef#detach для выполнения локальных проверок обнаружения изменений.

@returnsvoid

reattach

void

Повторно подключает ранее отсоединённое представление к дереву обнаружения изменений. По умолчанию представления подключены к дереву.

@returnsvoid

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

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

Использование markForCheck() со стратегией CheckOnce

В следующем примере для компонента задаётся стратегия обнаружения изменений OnPush (CheckOnce вместо стратегии CheckAlways, используемой по умолчанию), а затем через заданный интервал принудительно выполняется повторная проверка.

@Component({
  selector: 'app-root',
  template: `Number of ticks: {{ numberOfTicks }}`,
  changeDetection: ChangeDetectionStrategy.OnPush,
})
class AppComponent {
  numberOfTicks = 0;

  constructor(private ref: ChangeDetectorRef) {
    setInterval(() => {
      this.numberOfTicks++;
      // require view to be updated
      this.ref.markForCheck();
    }, 1000);
  }
}

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

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

class DataListProvider {
  // in a real application the returned data will be different every time
  get data() {
    return [1, 2, 3, 4, 5];
  }
}

@Component({
  selector: 'giant-list',
  template: ` <ul>
    @for (d of dataProvider.data; track $index) {
      <li>Item {{ d }}</li>
    }
  </ul>`,
})
class GiantList {
  constructor(
    private ref: ChangeDetectorRef,
    public dataProvider: DataListProvider,
  ) {
    ref.detach();
    setInterval(() => {
      this.ref.detectChanges();
    }, 5000);
  }
}

@Component({
  selector: 'app',
  providers: [DataListProvider],
  imports: [GiantList],
  template: `<giant-list />`,
})
class App {}

Повторное подключение отсоединённого компонента

В следующем примере создаётся компонент, отображающий данные в реальном времени. Компонент отсоединяет своё средство обнаружения изменений от основного дерева обнаружения изменений, когда свойство live имеет значение false, и подключает его повторно, когда значение свойства становится true.

class DataProvider {
  data = signal(1);
  constructor() {
    setInterval(() => {
      this.data.set(2);
    }, 500);
  }
}

@Component({
  selector: 'live-data',
  template: 'Data: {{dataProvider.data()}}',
})
class LiveData {
  live = input.required<boolean>();
  constructor(
    private ref: ChangeDetectorRef,
    public dataProvider: DataProvider,
  ) {
    effect(() => {
      if (this.live()) {
        this.ref.reattach();
      } else {
        this.ref.detach();
      }
    });
  }
}

@Component({
  selector: 'app',
  providers: [DataProvider],
  imports: [FormsModule, LiveData],
  template: `
    Live Update: <input type="checkbox" [(ngModel)]="live" />
    <live-data [live]="live"></live-data>
  `,
})
class App1 {
  live = true;
}