feat(nav): detach ChangeDetectorRef during transition

This commit is contained in:
Adam Bradley
2015-11-27 22:14:55 -06:00
parent 194c964dfb
commit 3d47061e4a
5 changed files with 53 additions and 28 deletions

View File

@ -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);
}
/**

View File

@ -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

View File

@ -233,10 +233,18 @@ class AnotherPage {
@App({
pages: [FirstPage, FullPage, PrimaryHeaderPage, AnotherPage],
template: `<ion-nav [root]="root"></ion-nav>`
template: `<ion-nav [root]="root"></ion-nav>`,
host: {
'[class.is-change-detecting]': 'isChangeDetecting'
}
})
class E2EApp {
constructor() {
this.root = FirstPage;
}
get isChangeDetecting() {
console.log('isChangeDetecting');
return true;
}
}

View File

@ -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;

View File

@ -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 {