Недоразумение при обнаружении изменений в Angular2 - с плункер

Обновлять

Компонент со стратегией OnPush получает «обнаружение изменений» при изменении входных данных, ДАЖЕ ЕСЛИ их детектор изменений отключен.

Начиная с Angular 4.1.1 (2017-05-04) OnPush должен уважать detach()

https://github.com/angular/angular/commit/acf83b9

Старая версия

Есть много недокументированного материала о том, как работает обнаружение изменений.

Нам следует знать о трех основных статусах changeDetection (cdMode):

1) CheckOnce - 0

CheckedOnce означает, что после вызова detectChanges режим детектора изменений станет Checked.

Класс AppView

detectChanges(throwOnChange: boolean): void {
  ...
  this.detectChangesInternal(throwOnChange);
  if (this.cdMode === ChangeDetectorStatus.CheckOnce) {
    this.cdMode = ChangeDetectorStatus.Checked; // <== this line
  }
  ...
}

2) Проверено - 1

Checked означает, что детектор изменений следует пропускать, пока его режим не изменится на CheckOnce.

3) Отдельно - 3

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

Вот места, где используется Detached

Класс AppView

Пропустить проверку содержимого

detectContentChildrenChanges(throwOnChange: boolean) {
  for (var i = 0; i < this.contentChildren.length; ++i) {
    var child = this.contentChildren[i];
    if (child.cdMode === ChangeDetectorStatus.Detached) continue; // <== this line
    child.detectChanges(throwOnChange);
  }
}

Пропустить проверку просмотра

detectViewChildrenChanges(throwOnChange: boolean) {
  for (var i = 0; i < this.viewChildren.length; ++i) {
    var child = this.viewChildren[i];
    if (child.cdMode === ChangeDetectorStatus.Detached) continue; // <== this line
    child.detectChanges(throwOnChange);
  }
}

Пропустить изменение cdMode на CheckOnce

markPathToRootAsCheckOnce(): void {
  let c: AppView<any> = this;
  while (isPresent(c) && c.cdMode !== ChangeDetectorStatus.Detached) { // <== this line
    if (c.cdMode === ChangeDetectorStatus.Checked) {
      c.cdMode = ChangeDetectorStatus.CheckOnce;
    }
    let parentEl =
        c.type === ViewType.COMPONENT ? c.declarationAppElement : c.viewContainerElement;
    c = isPresent(parentEl) ? parentEl.parentView : null;
  }
}

Примечание. markPathToRootAsCheckOnce работает во всех обработчиках событий вашего представления:

Таким образом, если установить статус Detached, то ваше представление не изменится.

Тогда как работает OnPush стратегия

OnPush означает, что режим детектора изменений будет установлен на CheckOnce во время гидратации.

compiler / src / view_compiler / property_binder.ts

const directiveDetectChangesStmt = isOnPushComp ?
   new o.IfStmt(directiveDetectChangesExpr, [compileElement.appElement.prop('componentView')
           .callMethod('markAsCheckOnce', [])
           .toStmt()]) : directiveDetectChangesExpr.toStmt();

https://github.com/angular/angular/blob/2.1.2/modules/%40angular/compiler/src/view_compiler/property_binder.ts#L193-L197

Посмотрим, как это выглядит на вашем примере:

Родительская фабрика (AppComponent)

И снова вернемся к классу AppView:

markAsCheckOnce(): void { this.cdMode = ChangeDetectorStatus.CheckOnce; }

Сценарий 1

1) Отсоединить детектор изменений дочерних элементов OnPush и дочерних элементов по умолчанию (нажмите «отсоединить ()» на обоих компонентах)

OnPush.cdMode - Detached

3) Нажмите «Изменить объект», чтобы передать измененный атрибут дочерним элементам.

AppComponent.detectChanges
       ||
       \/
//if (self._OnPush_35_4.detectChangesInInputProps(self,self._el_35,throwOnChange)) {
//  self._appEl_35.componentView.markAsCheckOnce();
//}
OnPush.markAsCheckOnce
       ||
       \/
OnPush.cdMode - CheckOnce
       ||
       \/
OnPush.detectChanges
       ||
       \/
OnPush.cdMode - Checked

Поэтому OnPush.dectectChanges стреляет.

Вот вывод:

Компонент со стратегией OnPush получает «обнаружение изменений» при изменении входных данных, ДАЖЕ ЕСЛИ их детектор изменений отключен. Кроме того, он изменяет статус представления на CheckOnce.

Сценарий 2

1) Отсоедините компакт-диск от компонента OnPush

OnPush.cdMode - Detached

6) Нажмите «Изменить объект», чтобы передать измененный атрибут дочерним элементам.

See 3) from scenario 1 => OnPush.cdMode - Checked

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

Как я уже упоминал выше, все обработчики событий включают markPathToRootAsCheckOnce. Так:

markPathToRootAsCheckOnce
        ||
        \/
OnPush.cdMode - CheckOnce
        ||
        \/
OnPush.detectChanges
        ||
        \/
OnPush.cdMode - Checked

Как видите, стратегия OnPush и ChangeDetector управляют одним свойством - cdMode.

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

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