fix(core): allow to detach OnPush components (#16394)

Fixes #9720

Author: tbosch

packages/core/src/view/refs.ts

@@ -236,11 +236,11 @@ export class ViewRef_ implements EmbeddedViewRef<any>, InternalViewRef {
   get destroyed(): boolean { return (this._view.state & ViewState.Destroyed) !== 0; }
 
   markForCheck(): void { markParentViewsForCheck(this._view); }
-  detach(): void { this._view.state &= ~ViewState.ChecksEnabled; }
+  detach(): void { this._view.state &= ~ViewState.Attached; }
   detectChanges(): void { Services.checkAndUpdateView(this._view); }
   checkNoChanges(): void { Services.checkNoChangesView(this._view); }
 
-  reattach(): void { this._view.state |= ViewState.ChecksEnabled; }
+  reattach(): void { this._view.state |= ViewState.Attached; }
   onDestroy(callback: Function) {
     if (!this._view.disposables) {
       this._view.disposables = [];

packages/core/src/view/types.ts

@@ -324,9 +324,12 @@ export interface ViewData {
  */
 export const enum ViewState {
   FirstCheck = 1 << 0,
-  ChecksEnabled = 1 << 1,
-  Errored = 1 << 2,
-  Destroyed = 1 << 3
+  Attached = 1 << 1,
+  ChecksEnabled = 1 << 2,
+  Errored = 1 << 3,
+  Destroyed = 1 << 4,
+
+  CatDetectChanges = Attached | ChecksEnabled,
 }
 
 export interface DisposableFn { (): void; }

packages/core/src/view/view.ts

@@ -211,7 +211,7 @@ function createView(
     viewContainerParent: null, parentNodeDef,
     context: null,
     component: null, nodes,
-    state: ViewState.FirstCheck | ViewState.ChecksEnabled, root, renderer,
+    state: ViewState.FirstCheck | ViewState.CatDetectChanges, root, renderer,
     oldValues: new Array(def.bindingCount), disposables
   };
   return view;
@@ -542,13 +542,13 @@ function callViewAction(view: ViewData, action: ViewAction) {
   const viewState = view.state;
   switch (action) {
     case ViewAction.CheckNoChanges:
-      if ((viewState & ViewState.ChecksEnabled) &&
+      if ((viewState & ViewState.CatDetectChanges) === ViewState.CatDetectChanges &&
           (viewState & (ViewState.Errored | ViewState.Destroyed)) === 0) {
         checkNoChangesView(view);
       }
       break;
     case ViewAction.CheckAndUpdate:
-      if ((viewState & ViewState.ChecksEnabled) &&
+      if ((viewState & ViewState.CatDetectChanges) === ViewState.CatDetectChanges &&
           (viewState & (ViewState.Errored | ViewState.Destroyed)) === 0) {
         checkAndUpdateView(view);
       }

packages/core/test/linker/change_detection_integration_spec.ts

@@ -1175,6 +1175,21 @@ export function main() {
            expect(renderLog.log).toEqual([]);
          }));
 
+      it('Detached should disable OnPush', fakeAsync(() => {
+           const ctx = createCompFixture('<push-cmp [value]="value"></push-cmp>');
+           ctx.componentInstance.value = 0;
+           ctx.detectChanges();
+           renderLog.clear();
+
+           const cmp: CompWithRef = queryDirs(ctx.debugElement, PushComp)[0];
+           cmp.changeDetectorRef.detach();
+
+           ctx.componentInstance.value = 1;
+           ctx.detectChanges();
+
+           expect(renderLog.log).toEqual([]);
+         }));
+
       it('Detached view can be checked locally', fakeAsync(() => {
            const ctx = createCompFixture('<wrap-comp-with-ref></wrap-comp-with-ref>');
            const cmp: CompWithRef = queryDirs(ctx.debugElement, CompWithRef)[0];
@@ -1225,7 +1240,6 @@ export function main() {
 
            ctx.detectChanges();
            expect(cmp.renderCount).toBe(count);
-
          }));
 
     });