Skip to content
Permalink
Browse files

fix(angular): ensure active page is not removed from change detection (

  • Loading branch information...
liamdebeasi committed May 20, 2019
1 parent bdd5109 commit b8d4961483d4add345af74d8a2e5a0a539deabfe
@@ -1,3 +1,4 @@
import { Location } from '@angular/common';
import { Attribute, ChangeDetectorRef, ComponentFactoryResolver, ComponentRef, Directive, ElementRef, EventEmitter, Injector, NgZone, OnDestroy, OnInit, Optional, Output, SkipSelf, ViewContainerRef } from '@angular/core';
import { ActivatedRoute, ChildrenOutletContexts, OutletContext, PRIMARY_OUTLET, Router } from '@angular/router';
import { BehaviorSubject, Observable } from 'rxjs';
@@ -59,6 +60,7 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
private changeDetector: ChangeDetectorRef,
private config: Config,
private navCtrl: NavController,
commonLocation: Location,
elementRef: ElementRef,
router: Router,
zone: NgZone,
@@ -68,7 +70,7 @@ export class IonRouterOutlet implements OnDestroy, OnInit {
this.nativeEl = elementRef.nativeElement;
this.name = name || PRIMARY_OUTLET;
this.tabsPrefix = tabs === 'true' ? getUrl(router, activatedRoute) : undefined;
this.stackCtrl = new StackController(this.tabsPrefix, this.nativeEl, router, navCtrl, zone);
this.stackCtrl = new StackController(this.tabsPrefix, this.nativeEl, router, navCtrl, zone, commonLocation);
parentContexts.onChildOutletCreated(this.name, this as any);
}

@@ -1,3 +1,4 @@
import { Location } from '@angular/common';
import { ComponentRef, NgZone } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { RouterDirection } from '@ionic/core';
@@ -22,6 +23,7 @@ export class StackController {
private router: Router,
private navCtrl: NavController,
private zone: NgZone,
private location: Location
) {
this.tabsPrefix = tabsPrefix !== undefined ? toSegments(tabsPrefix) : undefined;
}
@@ -95,7 +97,7 @@ export class StackController {
const views = this.insertView(enteringView, direction);
return this.wait(async () => {
await this.transition(enteringView, leavingView, animation, this.canGoBack(1), false);
await cleanupAsync(enteringView, views, viewsSnapshot);
await cleanupAsync(enteringView, views, viewsSnapshot, this.location);
return {
enteringView,
direction,
@@ -228,22 +230,35 @@ export class StackController {
}
}

function cleanupAsync(activeRoute: RouteView, views: RouteView[], viewsSnapshot: RouteView[]) {
function cleanupAsync(activeRoute: RouteView, views: RouteView[], viewsSnapshot: RouteView[], location: Location) {
return new Promise(resolve => {
requestAnimationFrame(() => {
cleanup(activeRoute, views, viewsSnapshot);
cleanup(activeRoute, views, viewsSnapshot, location);
resolve();
});
});
}

function cleanup(activeRoute: RouteView, views: RouteView[], viewsSnapshot: RouteView[]) {
function cleanup(activeRoute: RouteView, views: RouteView[], viewsSnapshot: RouteView[], location: Location) {
viewsSnapshot
.filter(view => !views.includes(view))
.forEach(destroyView);

views.forEach(view => {
if (view !== activeRoute) {

/**
* In the event that a user navigated multiple
* times in rapid succession, we want to make sure
* we don't pre-emptively detach a view while
* it is in mid-transition.
*
* In this instance we also do not care about query
* params or fragments as it will be the same view regardless
*/
const locationWithoutParams = location.path().split('?')[0];
const locationWithoutFragment = locationWithoutParams.split('#')[0];

if (view !== activeRoute && view.url !== locationWithoutFragment) {
const element = view.element;
element.setAttribute('aria-hidden', 'true');
element.classList.add('ion-page-hidden');

0 comments on commit b8d4961

Please sign in to comment.
You can’t perform that action at this time.