ChangeDetectorRef

Stable Class

Обзор класса

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

Описание класса

Подробности класса

markForCheck() : void

Помечает всех предков типа ChangeDetectionStrategy как подлежащие проверке.

(живой пример)

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

  constructor(ref: ChangeDetectorRef) {
    setInterval(() => {
      this.numberOfTicks ++
      // the following is required, otherwise the view will not be updated
      this.ref.markForCheck();
    }, 1000);
  }
}

@Component({
  selector: 'app',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <cmp><cmp>
  `,
})
class App {
}

detach() : void

Отсоединяет детектор изменений от дерева детекторов изменений.

Отсоединённый детектор изменений не будет проверен до его повторного присоединения.

Это также можно использовать в сочетании с ChangeDetectorRef, чтобы реализовать локальные проверки обнаружения изменений.

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

class DataProvider {
  // 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: `
    <li *ngFor="let d of dataProvider.data">Data {{d}}</lig>
  `,
})
class GiantList {
  constructor(private ref: ChangeDetectorRef, private dataProvider:DataProvider) {
    ref.detach();
    setInterval(() => {
      this.ref.detectChanges();
    }, 5000);
  }
}

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

detectChanges() : void

Проверяет детектор изменений и его дочерние элементы.

Это также можно использовать в сочетании с ChangeDetectorRef, чтобы реализовать локальные проверки обнаружения изменений.

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

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

См. ChangeDetectorRef для получения дополнительной информации.

checkNoChanges() : void

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

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

reattach() : void

Присоединяет детектор изменений к дереву детекторов изменений.

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

(живой пример)

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

class DataProvider {
  data = 1;

  constructor() {
    setInterval(() => {
      this.data = this.data * 2;
    }, 500);
  }
}

@Component({
  selector: 'live-data',
  inputs: ['live'],
  template: 'Data: {{dataProvider.data}}'
})
class LiveData {
  constructor(private ref: ChangeDetectorRef, private dataProvider:DataProvider) {}

  set live(value) {
    if (value)
      this.ref.reattach();
    else
      this.ref.detach();
  }
}

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

экспортировано из @angular/core/index, определено в @angular/core/src/change_detection/change_detector_ref.ts