javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-15 17:42:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf(angular): detach fromn change detection

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-12-19 03:06:33 +01:00
committed by Manu MA
parent 2c41823676
commit f613b3bdf0
3 changed files with 37 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
angular/src/directives/navigation/stack-controller.ts
View File

@ -43,7 +43,11 @@ export class StackController {
getExistingView(activatedRoute: ActivatedRoute): RouteView | undefined { getExistingView(activatedRoute: ActivatedRoute): RouteView | undefined {
const activatedUrlKey = getUrl(this.router, activatedRoute); const activatedUrlKey = getUrl(this.router, activatedRoute);
return this.views.find(vw => vw.url === activatedUrlKey); const view = this.views.find(vw => vw.url === activatedUrlKey);
if (view) {
view.ref.changeDetectorRef.reattach();
}
return view;
} }
async setActive(enteringView: RouteView) { async setActive(enteringView: RouteView) {
@ -55,7 +59,7 @@ export class StackController {
} }
this.insertView(enteringView, direction); this.insertView(enteringView, direction);
await this.transition(enteringView, leavingView, animation, this.canGoBack(1), false); await this.transition(enteringView, leavingView, animation, this.canGoBack(1), false);
this.cleanup(); requestAnimationFrame(() => this.cleanup());
} }
canGoBack(deep: number, stackId = this.getActiveStackId()): boolean { canGoBack(deep: number, stackId = this.getActiveStackId()): boolean {
@ -63,22 +67,27 @@ export class StackController {
} }
pop(deep: number, stackId = this.getActiveStackId()) { pop(deep: number, stackId = this.getActiveStackId()) {
this.zone.run(() => { return this.zone.run(() => {
const views = this.getStack(stackId); const views = this.getStack(stackId);
const view = views[views.length - deep - 1]; const view = views[views.length - deep - 1];
this.navCtrl.navigateBack(view.url); return this.navCtrl.navigateBack(view.url);
}); });
} }
startBackTransition(stackId = this.getActiveStackId()) { startBackTransition() {
const views = this.getStack(stackId); const leavingView = this.activeView;
this.transition( if (leavingView) {
views[views.length - 2], // entering view const views = this.getStack(leavingView.stackId);
views[views.length - 1], // leaving view const enteringView = views[views.length - 2];
'back', enteringView.ref.changeDetectorRef.reattach();
true, this.transition(
true enteringView, // entering view
); leavingView, // leaving view
'back',
true,
true
);
}
} }
endBackTransition(shouldComplete: boolean) { endBackTransition(shouldComplete: boolean) {
@ -125,6 +134,7 @@ export class StackController {
const element = view.element; const element = view.element;
element.setAttribute('aria-hidden', 'true'); element.setAttribute('aria-hidden', 'true');
element.classList.add('ion-page-hidden'); element.classList.add('ion-page-hidden');
view.ref.changeDetectorRef.detach();
} }
}); });
this.viewsSnapshot = views.slice(); this.viewsSnapshot = views.slice();
@ -145,11 +155,6 @@ export class StackController {
this.skipTransition = false; this.skipTransition = false;
return; return;
} }
// TODO
// if (enteringView) {
// enteringView.ref.changeDetectorRef.reattach();
// enteringView.ref.changeDetectorRef.markForCheck();
// }
const enteringEl = enteringView ? enteringView.element : undefined; const enteringEl = enteringView ? enteringView.element : undefined;
const leavingEl = leavingView ? leavingView.element : undefined; const leavingEl = leavingView ? leavingView.element : undefined;
const containerEl = this.containerEl; const containerEl = this.containerEl;

1
angular/src/providers/angular-delegate.ts
View File

@ -110,6 +110,7 @@ const LIFECYCLES = [
LIFECYCLE_DID_ENTER, LIFECYCLE_DID_ENTER,
LIFECYCLE_WILL_LEAVE, LIFECYCLE_WILL_LEAVE,
LIFECYCLE_DID_LEAVE, LIFECYCLE_DID_LEAVE,
LIFECYCLE_WILL_UNLOAD
]; ];
export function bindLifecycleEvents(instance: any, element: HTMLElement) { export function bindLifecycleEvents(instance: any, element: HTMLElement) {

13
angular/test/test-app/e2e/src/router-link.e2e-spec.ts
View File

@ -25,6 +25,18 @@ describe('router-link', () => {
it('should go forward with ion-button[routerLink]', async () => { it('should go forward with ion-button[routerLink]', async () => {
await element(by.css('#routerLink')).click(); await element(by.css('#routerLink')).click();
await testForward(); await testForward();
// test go back
await element(by.css('ion-back-button')).click();
await waitTime(500);
await testStack('ion-router-outlet', ['app-router-link']);
await testLifeCycle('app-router-link', {
ionViewWillEnter: 2,
ionViewDidEnter: 2,
ionViewWillLeave: 1,
ionViewDidLeave: 1,
});
}); });
it('should go forward with a[routerLink]', async () => { it('should go forward with a[routerLink]', async () => {
@ -95,6 +107,7 @@ async function testForward() {
ionViewWillLeave: 0, ionViewWillLeave: 0,
ionViewDidLeave: 0, ionViewDidLeave: 0,
}); });
} }
async function testRoot() { async function testRoot() {