From 3d47061e4afbc29f2fe7b365a6dd745cbb6539cc Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Fri, 27 Nov 2015 22:14:55 -0600 Subject: [PATCH] feat(nav): detach ChangeDetectorRef during transition --- ionic/components/nav/nav-controller.ts | 42 +++++++++++++++--------- ionic/components/nav/nav.ts | 8 +++-- ionic/components/nav/test/basic/index.ts | 10 +++++- ionic/components/tabs/tab.ts | 9 +++-- ionic/util/keyboard.ts | 12 ++++--- 5 files changed, 53 insertions(+), 28 deletions(-) diff --git a/ionic/components/nav/nav-controller.ts b/ionic/components/nav/nav-controller.ts index bcb53cc04b..05fba40983 100644 --- a/ionic/components/nav/nav-controller.ts +++ b/ionic/components/nav/nav-controller.ts @@ -1,4 +1,4 @@ -import {Compiler, ElementRef, Injector, provide, NgZone, DynamicComponentLoader, AppViewManager, Renderer} from 'angular2/angular2'; +import {ChangeDetectorRef, Compiler, ElementRef, Injector, provide, NgZone, DynamicComponentLoader, AppViewManager, Renderer} from 'angular2/angular2'; import {Ion} from '../ion'; import {IonicApp} from '../app/app'; @@ -107,7 +107,8 @@ export class NavController extends Ion { loader: DynamicComponentLoader, viewManager: AppViewManager, zone: NgZone, - renderer: Renderer + renderer: Renderer, + cd: ChangeDetectorRef ) { super(elementRef, config); @@ -121,6 +122,7 @@ export class NavController extends Ion { this._viewManager = viewManager; this._zone = zone; this._renderer = renderer; + this._cd = cd; this._views = []; this._trnsTime = 0; @@ -579,7 +581,6 @@ export class NavController extends Ion { * @returns {any} TODO */ _transition(enteringView, leavingView, opts, done) { - console.debug('_transition', enteringView, leavingView, opts); let self = this; if (enteringView === leavingView) { @@ -594,7 +595,7 @@ export class NavController extends Ion { } if (!enteringView) { - // if not entering view then create a bogus one + // if no entering view then create a bogus one enteringView = new ViewController() enteringView.loaded(); } @@ -640,6 +641,13 @@ export class NavController extends Ion { self.app.setEnabled(enableApp, duration); self.setTransitioning(!enableApp, duration); + if (!enableApp) { + // do a quick check for changes + // then detach the change detection during a transition + self._cd.detectChanges(); + self._cd.detach(); + } + if (opts.pageType) { transAnimation.before.addClass(opts.pageType); } @@ -658,10 +666,20 @@ export class NavController extends Ion { leavingView.didLeave(); } - // all done! + // reattach the change detection + self._cd.reattach(); + self._zone.run(() => { - self._transComplete(); - done(enteringView); + if (self.keyboard.isOpen()) { + self.keyboard.onClose(() => { + self._transComplete(); + done(enteringView); + }, 32); + + } else { + self._transComplete(); + done(enteringView); + } }); }); @@ -669,15 +687,7 @@ export class NavController extends Ion { } - // wait for the new view to complete setup - if (self.keyboard.isOpen()) { - self._stage(enteringView, () => { - self.keyboard.onClose(beginTransition, 64); - }); - - } else { - self._stage(enteringView, beginTransition); - } + self._stage(enteringView, beginTransition); } /** diff --git a/ionic/components/nav/nav.ts b/ionic/components/nav/nav.ts index 8857e441f4..c1ef17c504 100644 --- a/ionic/components/nav/nav.ts +++ b/ionic/components/nav/nav.ts @@ -1,4 +1,4 @@ -import {Component, Directive, ElementRef, Host, Optional, forwardRef, Inject, NgZone, Compiler, AppViewManager, DynamicComponentLoader, Renderer, ViewContainerRef} from 'angular2/angular2'; +import {ChangeDetectorRef, Component, Directive, ElementRef, Host, Optional, forwardRef, Inject, NgZone, Compiler, AppViewManager, DynamicComponentLoader, Renderer, ViewContainerRef} from 'angular2/angular2'; import {IonicApp} from '../app/app'; import {Config} from '../../config/config'; @@ -120,9 +120,11 @@ export class Nav extends NavController { loader: DynamicComponentLoader, viewManager: AppViewManager, zone: NgZone, - renderer: Renderer + renderer: Renderer, + cd: ChangeDetectorRef ) { - super(hostNavCtrl, app, config, keyboard, elementRef, compiler, loader, viewManager, zone, renderer); + super(hostNavCtrl, app, config, keyboard, elementRef, compiler, + loader, viewManager, zone, renderer, cd); if (viewCtrl) { // an ion-nav can also act as an ion-page within a parent ion-nav diff --git a/ionic/components/nav/test/basic/index.ts b/ionic/components/nav/test/basic/index.ts index 6aaee5524e..21e845d913 100644 --- a/ionic/components/nav/test/basic/index.ts +++ b/ionic/components/nav/test/basic/index.ts @@ -233,10 +233,18 @@ class AnotherPage { @App({ pages: [FirstPage, FullPage, PrimaryHeaderPage, AnotherPage], - template: `` + template: ``, + host: { + '[class.is-change-detecting]': 'isChangeDetecting' + } }) class E2EApp { constructor() { this.root = FirstPage; } + + get isChangeDetecting() { + console.log('isChangeDetecting'); + return true; + } } diff --git a/ionic/components/tabs/tab.ts b/ionic/components/tabs/tab.ts index 368536e89d..d6a2117cfe 100644 --- a/ionic/components/tabs/tab.ts +++ b/ionic/components/tabs/tab.ts @@ -1,4 +1,4 @@ -import {Component, Directive, Host, ElementRef, Compiler, DynamicComponentLoader, AppViewManager, NgZone, Renderer} from 'angular2/angular2'; +import {ChangeDetectorRef, Component, Directive, Host, ElementRef, Compiler, DynamicComponentLoader, AppViewManager, NgZone, Renderer} from 'angular2/angular2'; import {IonicApp} from '../app/app'; import {Config} from '../../config/config'; @@ -79,10 +79,13 @@ export class Tab extends NavController { loader: DynamicComponentLoader, viewManager: AppViewManager, zone: NgZone, - renderer: Renderer + renderer: Renderer, + cd: ChangeDetectorRef ) { // A Tab is a NavController for its child pages - super(parentTabs, app, config, keyboard, elementRef, compiler, loader, viewManager, zone, renderer); + super(parentTabs, app, config, keyboard, elementRef, compiler, + loader, viewManager, zone, renderer, cd); + this._isInitial = parentTabs.add(this); this._panelId = 'tabpanel-' + this.id; diff --git a/ionic/util/keyboard.ts b/ionic/util/keyboard.ts index fe6e012b58..7eebcf5154 100644 --- a/ionic/util/keyboard.ts +++ b/ionic/util/keyboard.ts @@ -2,7 +2,7 @@ import {Injectable, NgZone} from 'angular2/angular2'; import {Config} from '../config/config'; import {Form} from './form'; -import {hasFocusedTextInput, raf} from './dom'; +import {hasFocusedTextInput, raf, rafFrames} from './dom'; @Injectable() @@ -35,9 +35,11 @@ export class Keyboard { function checkKeyboard() { if (!self.isOpen()) { - self.zone.run(() => { - console.debug('keyboard closed'); - callback(); + rafFrames(30, () => { + self.zone.run(() => { + console.debug('keyboard closed'); + callback(); + }); }); } else { @@ -47,7 +49,7 @@ export class Keyboard { setTimeout(checkKeyboard, pollingInternval); }); - + return promise; }